streamlit-audiorecorder

An audio Recorder for streamlit

Description

Audio recorder component for streamlit.
It creates a button to start the recording and takes three arguments: the start button text, the stop button text, and the pause button text.
If the pause button text is not specified, the pause button is not displayed.

Return value

The component's return value is a pydub AudioSegment.
All AudioSegment methods are available, in particular you can:

• Play the audio in the frontend with st.audio(audio.export().read())
• Save the audio to a file with audio.export("audio.wav", format="wav")

Installation:

pip install streamlit_rec

Note: This package uses ffmpeg, so it should be installed for this audiorecorder to work properly.

On ubuntu/debian: sudo apt update && sudo apt install ffmpeg
On mac: brew install ffmpeg

Usage:

import streamlit as st
from streamlit_rec import audiorecorder

st.title("Audio Recorder")
audio = audiorecorder()

if len(audio) > 0:
    # To play audio in frontend:
    st.audio(audio.export().read())  

    # To save audio to a file, use pydub export method:
    audio.export("audio.wav", format="wav")

    # To get audio properties, use pydub AudioSegment properties:
    st.write(f"Frame rate: {audio.frame_rate}, Frame width: {audio.frame_width}, Duration: {audio.duration_seconds} seconds")

Troubleshooting:

Error: No record button is shown and you get the following error message in the console:

Component Error
Cannot read properties of undefined (reading 'getUserMedia')

Reason: To record the audio, this component uses the MediaDevices`` interface. For security reasons, the getUserMedia()` method is available only in secure contexts (HTTPS), as explained in the MDM documentation :

As an API that may involve significant privacy concerns, getUserMedia()'s specification lays out a wide array of privacy and security requirements that browsers are obligated to meet.

getUserMedia() is a powerful feature that can only be used in secure contexts; in insecure contexts, navigator.mediaDevices is undefined, preventing access to getUserMedia(). A secure context is, in short, a page loaded using HTTPS or the file:/// URL scheme, or a page loaded from localhost.

Solution: Serve your website using HTTPS. If you are serving your website locally, make sure to access it using localhost, not an IP address.

Just solved this problem.

1.Generate temporary SSL authentication

openssl genrsa 2048 > host.key
chmod 400 host.key
openssl req -new -x509 -nodes -sha256 -days 365 -key host.key -out host.cert

2.streamlit run with https

streamlit run xx.py --server.sslCertFile host.cert --server.sslKeyFile=host.key