Embed function to html in st.markdown

Using Streamlit
1

Summary

I’m designing a stt demo app with streamlit. My use case is to create audio player, can stream every 1024 bytes of audio packet to stt server and print response to web, when play button is clicked. My plan was to create a audio player with html audio tag and embed javascript function. But I got stuck at handling responses and javascript function.

My approach

Code snippet:

import base64
import streamlit as st
import requests


def get_audio_file_content(audio_file,callback_function:str):
    audio_bytes = audio_file.read()
    encoded_bytes = base64.b64encode(audio_bytes).decode('utf-8')
    audio_tag = f'<audio controls src="data:audio/wav;base64,{encoded_bytes}" onclick=f"{callback_function}"></audio>'
    return audio_tag

def main():
    st.title("Audio Player")

    # Upload audio file
    uploaded_file = st.file_uploader("Upload an audio file", type=["mp3", "wav"])
    callback_function = """
    <script>
     function myJavaScriptFunc
    </script>
    """
   
    if uploaded_file is not None:
        audio_tag = get_audio_file_content(uploaded_file,callback_function)
        st.markdown(audio_tag, unsafe_allow_html=True)

if __name__ == "__main__":
    main()

Expected behavior:

Play audio and the response of stt server is printed at web, when play button is clicked.

2

You won’t be able to execute any JavaScript using st.markdown. You will need to use the components api instead.

Note that with the components api, your HTML/JavaScript will get wrapped in an iframe, so be sure to use window.parent.document to reach outside of the iframe where needed.

3

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