Manually triggering a javascript code or button click

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)

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.