I just came across this question Audio display and thought to myself what if we want to do the opposite , Its pretty straight forward if you are listening through mic where streamlit server is hosted but it gets a little tricky if you want to do it on client side.
Worry not. Javascript to the rescue,
Checkout this ( buggy ) snippet, that does just this !
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"))
Thats super cool, so you press this button and then speak into your mic? Do you need an external mic (like on a pair of headphones) or would it work with your computers builtin mic?
(side note: I love how you almost always put gifs in your posts, it makes them so easy to read and understand!)
import streamlit as st
from bokeh.models.widgets import Button
from bokeh.models import CustomJS
text = st.text_input("Say what ?")
tts_button = Button(label="Speak", width=100)
tts_button.js_on_event("button_click", CustomJS(code=f"""
var u = new SpeechSynthesisUtterance();
u.text = "{text}";
u.lang = 'en-US';
speechSynthesis.speak(u);
"""))
st.bokeh_chart(tts_button)
But the problem lies here as well, you need to click the speak button.
Hey @napoles3d, I haven’t tried it recently but I think webcam and mic won’t work due to sandboxing of components.
The two things I’ve been able to make work were, speech and geolocation APIs…
Let me know if webcam works !
This is pretty nice. Is it possible to add timer to this, so to record for 10 seconds for example and and save the text in a list? Sorry I am new to CustomJS(). Or is it possible to have a stop button also - so when the speech is done, one gets the text for output?
, Its pretty straight forward if you are listening through mic where streamlit server is hosted but it gets a little tricky if you want to do it on client side.
) snippet, that does just this !
) :