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?


Hello @Ayush_Kumar_Shah, welcome to the forums !

This is a super use case you have here :smiley: I had a similar usecase where I wanted to record my voice via Streamlit and then make a “chipymunk” version of it.

I think I remember why I had to put it down for now :

  • My initial take was to select the recording audio device through sounddevice, or in your case through pyaudio, but this selects the recording device on Streamlit’s server, not on the user facing web page. So if your app is deployed, selecting the recording device for the server is not very interesting…
  • My second take would be to use some HTML5 input audio capture, but I think this needs some JS processing, and Streamlit does not support that yet.
    • That could be an interesting Custom Component to write.
    • If you a super courageous, though this is more of a hack that I have yet to test, you can run ipywidgets in Bokeh 2 so you could try ipywebrtc inside st.bokeh_chart, have the output file streamed in a temporary folder and have Streamlit watch that folder…
  • You could cheat the system by pre-recording your guitar play and send it through the file uploader in the meantime (that’s ultimately what I did when translating the DDSP Colab demo to Streamlit…)
    • Did not skim the Streamlit File Uploader source code but maybe it’s possible to enhance it with audio capture capabilities ? There are github issues here and here, we can add our use cases there and see if more people are interested in this feature natively in Streamlit or as a custom component. I would be a big fan for audio/video input in native Streamlit though, because “Deep Learning”

Hope this helps a bit :upside_down_face:

1 Like

Hello @andfanilo. Thank you for all the useful information. Here are my takes from each of it:

  • I realized the same thing and figured that I need a way to select the recording device on the user’s web page instead.
  • I tried using ipywebrtc but I couldn’t get it to record sound. The code snippet didn’t work and I couldn’t figure out what’s wrong. The recorder didn’t execute and I got the error
    ValueError: No data, did you record anything?
  • The pre-recording option will not work for me as the users should be able to play and record the chord so that the system can return the predicted chord. So, the system should be able to predict a chord for every new recording the user does.
    • Yeah, it would be awesome if Streamlit would add the feature of audio/video input.

I am searching for any kind of hack that could do the job for me. Without the ability of recording sound by users, the app is of no use.

However, I greatly appreciate your help. If you find something, please inform me as well. Thanks.

1 Like

Has anyone come up with a solution to this? I am trying to capture microphone input and manipulate the speaker’s voice. I have it working locally but I’m having the same problems as above where I can’t capture the user’s microphone.