Record sound from the user's microphone with streamlit

[shop2world]

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

Selecting audio input or output device

I created a webapp called Guitar Chord Recognition using Streamlit. It allows you to record a chord and then outputs the predicted chord. It also displays the spectrogram of the sound recorded. You can view the demo here. Also, you may view the GitHub repository. I want to deploy this app publicly but I need a way to select the recording device in the app. I couldn’t find any particular way to achieve this. Is there any way to select the input or output device in the web app?

[MadeUpMasters]

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.

[andfanilo]

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

[andfanilo]

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

Cheers,
Fanilo

[shop2world]

Great! thank you for your beautiful job!

[daily_Ag]

Any news here ! …

[andfanilo]

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.

New Component: streamlit-webrtc, a new way to deal with real-time media streams

Can you please indicate for me the exact part where i cn use only the microphone as an input without using the camera . Thank you

Fanilo

[stefanrmmr]

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!

[loukra]

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

[theevann]

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