Record sound from the user's microphone with streamlit

Hello. If audio input is possible with stremlit,
the scalability of machine learning project will be much wider.
I would like to know if this feature is currently in progress as a development project
inside streamlit to make it possible for streamlit.

I think there are probably many people who need this function.
thank you

3 Likes

I also would love to see this functionality! I use streamlit for validating audio datasets but I would love to be able to quickly deploy streamlit apps to collect audio data from users. Down the road I will implement a proper web interface for doing this but the flexibility of being able to do it in streamlit would make prototyping and building custom test sets much easier. Thank you.

Hey there,

I’ve added this to our Custom Component tracker.

As for myself I’ve tried integrating react-mic as a component in Streamlit to solve this:

  • If it’s just for one shot recording it should be possible to work out something.
  • If it’s for realtime audio processing I don’t have a good idea on how to build this with components given Streamlit’s mental model, would probably offshore this to an API which Streamlit interacts with.

If someone has a bit of free time I hope this task can be picked up too for a Component. Maybe I’ll try again around January…

Best,
Fanilo

1 Like

In the meantime have a look at the code from Speech To Text On Client Side Using HTML5 and Streamlit Bokeh Events , maybe that can also solve your demand :slight_smile:

Cheers,
Fanilo

1 Like

Great! thank you for your beautiful job! :smiley:

Any news here ! …

Hey @daily_Ag
I guess you found out but for other users stumbling in this the current best solution is by using the streamlit-webrtc component.

Fanilo

2 Likes

Feel free to check out my Streamlit Audio Recorder Custom Component that implements functionality to record audio from the user’s microphone via the Web-Media-API (web browser audio API access, built ontop of “audio-react-recorder”). In comparison to Ayush_Kumar_Shah 's solution, which is only functional on local deployments, this custom component also works in applications that are deployed to the web! :balloon:

4 Likes

Hey Stefan, i love your audio recorder but want to change the Text or color off the Recording button for my project. I tried to change the buttons text in the “StreamlitAudioRecorder.tsx” but this will not change the text on the streamlit page. I really don’t now anything about React and just wondering what I have to do to change it? Is it way more complicated than I thought? Would be cool if you could help me :slight_smile:

This is an old thread, but for future users, you can use:
https://github.com/theevann/streamlit-audiorecorder.

1 Like