I'm working on a dash-devices app where two users can connect to see the same page, where one of them will press a button to record some speech so the other can see the transcription. I need to run this app from a remote server, so I'll have to be able to use the microphone on the user's machine to get the transcription. The examples on the Dash site for clientside callbacks describe a little on how to do this, but for my initial testing I've been using the SpeechRecognition library from Python and I'm not entirely sure how to use JavaScript to get the recording and feed it into the rest of the app.
Is there a standard/good way to record user speech from the browser and parse the transcription in Python when this button is pressed? The code below is an example of what my current callback and app setup looks like and what I need to convert to a clientside callback.
from dash_devices.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import speech_recognition as sr
app = dash_devices.Dash(__name__)
app.config.suppress_callback_exceptions = True
r = sr.Recognizer()
app.layout = html.Div([
html.Div("Transcription", id='transcription'),
html.Button(id='listen-pause', children='Record Message')])
@app.callback(
[Output(component_id='transcription', component_property='children'),
Output(component_id='listen-pause', component_property='children')],
[Input(component_id='listen-pause', component_property='n_clicks')]
)
def transcribe_speech(n_clicks):
if n_clicks == 0:
return ["", "Record Message"]
print("Recording Speech...")
try:
with sr.Microphone() as source:
audio_text = r.listen(source, 10, 3)
transcript = r.recognize_google(audio_text)
return [r.recognize_google(audio_text), "Record Message"]
except sr.UnknownValueError:
return ["Could not parse input", "Record Message"]
if __name__ == '__main__':
app.run_server(debug=True, host='0.0.0.0', port=5000) ```