How do you record user's audio in Streamlit shearing?

Question

I'm looking to deploy a small data collection app that allows users to record themselves saying some phrases.

Building this with streamlit.

I can get it to work locally, but can't seem to find a solution that works in the Streamlit-Shearing service.

Any ideas?

Answer 1

I do not fully understand your question I think this might help.

import streamlit as st
from bokeh.models.widgets import Button
from bokeh.models import CustomJS
from streamlit_bokeh_events import streamlit_bokeh_events

stt_button = Button(label="Speak", width=100)

stt_button.js_on_event("button_click", CustomJS(code="""
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;

recognition.onresult = function (e) {
    var value = "";
    for (var i = e.resultIndex; i < e.results.length; ++i) {
        if (e.results[i].isFinal) {
            value += e.results[i][0].transcript;
        }
    }
    if ( value != "") {
        document.dispatchEvent(new CustomEvent("GET_TEXT", {detail: value}));
    }
}
recognition.start();
"""))

result = streamlit_bokeh_events(
stt_button,
events="GET_TEXT",
key="listen",
refresh_on_update=False,
override_height=75,
debounce_time=0)

if result:
if "GET_TEXT" in result:
    st.write(result.get("GET_TEXT"))`

Answer 2

I have been working on implementing a custom component that enables recording audio from the client’s microphone in apps that are deployed on the web (Streamlit-Audio-Recorder). This version of the component supports downloading the recorded audio but not directly returning audio data to streamlit/Python.