streamlit-rec 0.0.5
Audio recorder component for streamlit
Requires Python: >=3.6

[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://audio-recorder.streamlit.app)
# 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](https://github.com/jiaaro/pydub/) [`AudioSegment`](https://github.com/jiaaro/pydub/blob/master/API.markdown#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:
```bash
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:
```python
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:
 ```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](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) :

> 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
```console
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
```console
streamlit run xx.py --server.sslCertFile host.cert --server.sslKeyFile=host.key
```