search

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)
MIT License
415 stars 75 forks source link

Using the audio in Streamlit #1

Open Paethon opened 2 years ago

Paethon commented 2 years ago

Maybe I am just missing something, but how do you actually use the recorded audio in your Streamlit app?

stefanrmmr commented 2 years ago

@Paethon Hi Sebastian, the current version of the audio recorder enables you to record audio and download it (WAV, 16bit, 44kHz). I am working on providing an extended version of this streamlit-component soon, which can directly send the audio data back to Python via the return value interface.

Unfortunately, I ran into problems regarding the conversion of the recorded Audio-Blob (web-media) to a binary buffer (base64) that can be returned. (the conversion takes forever and converting in chunks is hardly possible/rather complicated) If you are knowledgeable in these fields of audio data processing, feel free to reach out to me!

stefanrmmr commented 2 years ago

@Paethon Work Around (rather not elegant but functional): You can use the current version of the component, record audio, download it and then drag the file from the browser's download preview (downloads bar bottom of the screen, left) into a streamlit file-upload component.

Paethon commented 2 years ago

Thanks! Good to know I am not just too stupid to use the component 😂

And no, I, unfortunately, don't know a lot about audio processing. Good luck with the remaining problems. Once we can directly get back the audio from the component, I think this will be a very valuable addition to Streamlit!

stefanrmmr commented 2 years ago

@Paethon No worries 😄, I will try hard to make this happen. Stay tuned!

jingzhaoou commented 2 years ago

I filed the same request and found out someone else already requested the same feature. Agree that "Once we can directly get back the audio from the component, I think this will be a very valuable addition to Streamlit!"

millawell commented 2 years ago

I've created a pull request for this https://github.com/stefanrmmr/streamlit_audio_recorder/issues/1

stefanrmmr commented 2 years ago

@Paethon @jingzhaoou Hello there folks, I've just merged @millawell's pull request and added some additional changes. Now the component directly returns audio data to the Python backend! This intermediary solution should be sufficient for shorter audio recordings (max 15sec). For longer audio cases, the merged code displays similar issues like my initial approach, as described above (exp. increasing time complexity due to conversion to arrayBuffer)

Paethon commented 2 years ago

That's great news. Going to try it out ASAP! 😁

tatiana-iazykova commented 2 years ago

Hi! I was wondering whether it's possible to disable rendering the "play" component on the webpage and only use the component for recording audio without playing it?

3dw1np commented 1 year ago

Yes I would to have the same option to display or not the audioplayer.

inarighas commented 1 year ago

@Paethon Hi Sebastian, the current version of the audio recorder enables you to record audio and download it (WAV, 16bit, 44kHz). I am working on providing an extended version of this streamlit-component soon, which can directly send the audio data back to Python via the return value interface.

Unfortunately, I ran into problems regarding the conversion of the recorded Audio-Blob (web-media) to a binary buffer (base64) that can be returned. (the conversion takes forever and converting in chunks is hardly possible/rather complicated) If you are knowledgeable in these fields of audio data processing, feel free to reach out to me!

In the current version, the sampling rate is 48 kHz and not 44kHz. I do not know if this depends on local configuration of the browser and the microphone and if we can "programmatcally" get the sampling rate value. I think it would be handy to have the values of quantization and sampling rate along with what we get from stream.read(). This will ease further post processing we may like to perform inside the streamlit app.

PS. I am sorry if I did not respect some of the community guidelines. I can create another issue or delete this comment if not appropriate.