Summary
I have an Voicebot app which takes the voice input someone says and then with a button click generates a answer based on that which gets displayed and played with audio. I want to trigger the javascript attached to the button immediately after the audio finished playing again so that the user can talk freely with the bot without needing to click everytime
Steps to reproduce
Code snippet:
speak_button = Button(label="Speak", button_type="success", width=button_size, height=button_size, name = 'speak_button')
speak_js = CustomJS(code="""
*listen code in JS*
""")
def audio_output(output, input):
audio = st.empty()
audio_byte_io = BytesIO()
tts = gTTS(output, lang='en', tld='com')
tts.write_to_fp(audio_byte_io)
sound_b64 = base64.b64encode(audio_byte_io.getvalue()).decode("utf-8")
audio_html = f'<audio id="audioElement" controls autoplay><source src="data:audio/mp3;base64,{sound_b64}"></audio>'
audio.markdown(audio_html, unsafe_allow_html=True)
Either the button trigger or JS trigger should be placed in the audio_output function. I already tried it with components.html but i am getting errors with that I did it like this
import streamlit.components.v1 as html
my_js = """
alert("Hola mundo");
"""
my_html = f"<script>{my_js}</script>"
html(my_html)