Help customizing Streamlit Audio Recorder

🧩 Custom Components
1

Hi all - I got the Streamlit Audio Recorder from this github working on my streamlit app: GitHub - stefanrmmr/streamlit-audio-recorder: Record Audio from the User's Microphone in Apps that are Deployed to the Web. (via Browser Media-API, REACT-based, Streamlit Custom Component)

But, how can I customize this component? For example, I don’t want the download button, nor the ability to playback the audio on the screen. How can I achieve this?

I attached a screenshot of my app for reference. I appreciate any help I can get here! Thank you :slight_smile:

Screenshot 2024-01-02 at 4.35.02 PM
Screenshot 2024-01-02 at 4.35.02 PM1968×1178 114 KB

2

Hi @channy

To remove the audio playback, you can delete the line with st.audio() from the app.py file. As for the download button it is inherently displayed by the component. However, you can also try to hide the download button by customizing the CSS element (see this video on getting started with this https://youtube.com/watch?v=gr_KyGfO_eU)

Hope this helps!

3

Hi @dataprofessor

Thanks for the response! Unfortunately, the audio playback is still there even after removing the st.audio() line. In fact, the only code I have in the audiorec_demo_app() function is as follows:

def audiorec_demo_app():

    # TITLE
    st.title('Recording/listening app')
    st.markdown('Press the buttons below to start recording.')
    st.write('\n\n')

    # once a recording is completed, audio data will be saved to wav_audio_data
    wav_audio_data = st_audiorec() # tadaaaa! yes, that's it! :D

Is there a solution for this?

4

Hi @channy

Perhaps you can try a hacky approach by making the necessary changes to a forked repo of the library. Then install that by defining the URL in the requirements.txt file as described in the following Docs page:

5

Ok, I’ll give it a try. Thanks!

1 Like