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)

   

streamlit-audio-recorder's Issues

the function "withStreamlitConnection" may have a problem in Remote servers

It works locally and can receive data returned from React, but when you mount a web page on the server, there is no way to send audio data to streamlit on the web page, and it seems that there is a problem with the link. At present, on this web page, it is possible to obtain microphone permissions normally with https, and it is no problem to download and play, I don't understand if I need to rely on anything else to ensure the link.

Using the audio in Streamlit

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

Issue with using on mobile phone

I hosted the app on Hugging Face using Streamlit, but whenever the user tries to record audio using the mobile phone's microphone, it throws an error or doesn't seem to work perfectly the first time. Only after the second attempt does it run smoothly.
seems for the first time it doesn't record anything.

Access data from Python

I just found out this project from Stack Overflow. I gave it a try and things work great! A pity that I don't see a way to access the data from Python. If you have any hints how that can be done, I am more than happy to help out. Thanks a lot!

Recording permission error when running remotely.

I have an error when running streamlit-audio-recorder remotely (on an AWS server), however, when I run it locally, the error does not reproduce.

When I am loading the page, I can see the following warning in the browser's developer console:

DevTools failed to load source map: Could not load content for https://my_url/component/st_audiorec.st_audiorec/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

When I am pressing the "Start recording" button, nothing happens on the web page, but I am seeing two errors in the developer console:

Error: Issue getting mic DOMException: Permission denied

and

index.js:125 Uncaught (in promise) TypeError: Failed to execute 'createMediaStreamSource' on 'AudioContext': parameter 1 is not of type 'MediaStream'.
    at n.setUpRecording (index.js:125:36)
    at e (index.js:272:10)

Here index.js is apparently the file with AudioReactRecorder source code.

The browser page is allowed to use the microphone, so this "Permission denied" error looks really mysterious.
I am using Google Chrome on Mac.

Can anyone please suggest how can I fix this error? It may be related to #9, but the error messages are different, so I am not sure.

Trouble with app

I am having some trouble using your app. When I deployed it in my own app, the "Start Recording" button didn't start a recording, it just recorded a 1ms long clip and then ends it.

Darkmode + opportunity to hide the waveform (display a pulsating recording red dot instead)

'wav_audio_data' is not defined

Trying to incorporate this into an existing Python script and getting this error:

NameError: name 'wav_audio_data' is not defined
C:\Users\XX\anaconda3\Lib\site-packages\streamlit\watcher\local_sources_watcher.py:177: UserWarning: Torchaudio's I/O functions now support par-call bakcend dispatch. Importing backend implementation directly is no longer guaranteed to work. Please use `backend` keyword with load/save/info function, instead of calling the udnerlying implementation directly.
  lambda m: [p for p in m.__path__._path],

@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 **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.

Originally posted by @stefanrmmr in #1 (comment)

I tried to do what you mentioned above (download and then upload file) but I find that the streamlit app freezes up trying to continually do this conversion for any lengthy audio. Is there an easy way to avoid this conversion that is tied to the stop button.

draw audio waveform

Thank you very much. This tool is very useful. Will it support drawing audio waveforms？

Audio quality

Hello, this is my first time working with audio so I'm probably missing something.
I have a model to predict guitar chords, and I'm implementing a simple streamlit dashboard to record and send these audios for prediction. This is the code I'm using, based on this repo:

`wav_audio_data = st_audiorec()
if wav_audio_data is not None:
audio = st.audio(wav_audio_data, format='audio/wav')

data_s16 = np.frombuffer(wav_audio_data, dtype=np.int16, count=len(wav_audio_data)//2, `offset=0)`

My questions:

1. Is it possible to directly retrieve the audio in a numpy array? I realize the 'audio' in the code is a DeltaGenerator object, but I don't really know how to use it. So I used this np.frombuffer on the wav_audio_data, but I'm not sure if this is appropriate.
2. Is it possible to increase the quality of the recorded audio? When I record something on my computer I have a clear sound, but when I record in the dashboard, I have a low-quality audio.

Thank you in advance

Get "Component Error: Cannot read properties of null (reading 'getAudioTracks')" when run remotely

My streamlit app using this component runs fine locally on my Mac but when I run the same app on an Ubuntu VM in the cloud (Azure), it does not work.

When I start the recording, I don't see the waveform, so no recording may be taking place. And when I click stop, I get this error: "Component Error: Cannot read properties of null (reading 'getAudioTracks')"

Workaround for the reset button

I have been trying to use this package for recording and saving audio on Streamlit applications deployed over Azure web apps. I was wondering if there is a workaround for the reset button so that every time the recording is stopped, we do not have to manually reset it. At times when I refresh the whole Streamlit application and run the code again and if, during the previous session, I had not reset the recorder unless I click reset again, it doesn't allow me to record.

P.S. Also does this work over https? I have been trying it locally so far and was wondering if it would work over the Azure web apps running over HTTPS.

Thanks for the help and for coming up with this useful package!

The audio player is being displayed twice

Hi,

Thank you for your great project. It really helps.

I was indeed able to record audio from the Streamlit app running on my remote server. However, when I stop the recording, two players for the same audio are displayed. Please check the attached image. Is this the default behavior?

My environment

• Python 3.8.9
• streamlit==1.29.0
• streamlit-audiorec==0.1.3
• code

import streamlit as st
from st_audiorec import st_audiorec
wav_audio_data = st_audiorec()

if wav_audio_data is not None:
    st.audio(wav_audio_data, format='audio/wav')

Use recorded audio as a python object

Are we able to support something like this? I am trying to record and video and send it immediately into a voice detection model

Start recording automatically when the function is executed.

Hi!
As far as you know, would it be possible to make the audio recording execute automatically when the function is called, so that the user does not have to press the "Start Recording" button to start the recording?
I need the to play and record a file simultaneously, but given that I cannot easily execute the python playback function when the user presses the HTML "Start Recording", I was wondering if it is possible to do this workaround.
And another question: is it possible to record at a different sample rate and bit depth?
Thank you!

Downloading audio file to a server location

Hello!

I love this app, thank you so much for developing. It's very easy to use however I'm trying to save down the audio file to a server location once the stop button is pressed, which works, but takes an extremely long time to once the audio recording is longer than a couple of seconds (though downloading the file locally to my machine works well). Does anyone know of a potential workaround that would speed up the processing, ie leveraging or compressing the audio? Would appreciate any insights!

repo is too large

it would be great to decrease repo size

du -ah -d 1

477M    ./streamlit_audio_recorder

(base) ➜  github git clone https://github.com/stefanrmmr/streamlit_audio_recorder
Cloning into 'streamlit_audio_recorder'...
remote: Enumerating objects: 36808, done.
remote: Counting objects: 100% (234/234), done.
remote: Compressing objects: 100% (179/179), done.
remote: Total 36808 (delta 92), reused 173 (delta 49), pack-reused 36574
Receiving objects: 100% (36808/36808), 55.23 MiB | 7.80 MiB/s, done.
Resolving deltas: 100% (8315/8315), done.
Updating files: 100% (40542/40542), done.