A Dash component for recording audio from the browser
Project description
Overview
A Dash component for recording audio. The component is built using microphone-stream. The component is a work in progress and is not yet ready for production use.
Installation
Simply install the package using pip:
pip install dash-recording-components
and import the AudioRecorder
component:
from dash_recording_components import AudioRecorder
Use-Cases
Currently, there is only one Dash component being built: AudioRecorder
, in the dash_recording_components
package, which is built from the React component in src/lib/components/AudioRecorder.react.js
. An example application using the component can be seen below (note this also uses the excellent library soundfile and numpy to save the audio to a wav file for use in an AudioPlayer
).
import dash
from dash import html
from dash.dependencies import Input, Output, State
from dash_recording_components import AudioRecorder
import soundfile as sf
import numpy as np
import io
import base64
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1("Audio Recorder and Player"),
html.Button("Record", id="record-button"),
html.Button("Stop Recording", id="stop-button", n_clicks=0),
html.Button("Play", id="play-button"),
html.Div(id="audio-output"),
html.Div(id="dummy-output", style={"display": "none"}),
AudioRecorder(id="audio-recorder")
])
audio_samples = []
@app.callback(
Output("audio-recorder", "recording"),
Input("record-button", "n_clicks"),
Input("stop-button", "n_clicks"),
State("audio-recorder", "recording"),
prevent_initial_call=True
)
def control_recording(record_clicks, stop_clicks, recording):
return record_clicks > stop_clicks
@app.callback(
Output("audio-output", "children"),
Input("play-button", "n_clicks"),
prevent_initial_call=True
)
def play_audio(play_clicks):
if play_clicks:
if audio_samples:
# when we play the audio we need to convert to b64 encoded wav and provide it as a data URI
audio_array = np.array(audio_samples)
with io.BytesIO() as wav_buffer:
sf.write(wav_buffer, audio_array, 16000, format="WAV")
wav_bytes = wav_buffer.getvalue()
wav_base64 = base64.b64encode(wav_bytes).decode()
audio_src = f"data:audio/wav;base64,{wav_base64}"
return html.Audio(src=audio_src, controls=True)
return ""
@app.callback(
Output("dummy-output", "children"),
Input("audio-recorder", "audio"),
prevent_initial_call=True
)
def update_audio(audio):
# running list of the audio samples, aggregated on the server
global audio_samples
if audio is not None:
# Update the audio samples with the new audio
audio_samples += list(audio.values())
return ""
if __name__ == "__main__":
app.run_server(debug=True)
Development and Contributing
Contributions welcome! To get started, clone the repo and follow the steps below:
- Create a Poetry environment and install all required development dependencies:
poetry install --dev
- Install webpack
- Install
npm
npm install
to install the dependencies- Build the js files:
npm run build:js
- Build the Dash components (Python modules):
npm run build:py
Changes in the React components (src/lib/components
), such as exposing new properties or updating audio collection logic require running steps 5 and 6 above. The existing autogenerated Python modules should not be edited.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distributions
Built Distribution
File details
Details for the file dash_recording_components-1.0.3-py3-none-any.whl
.
File metadata
- Download URL: dash_recording_components-1.0.3-py3-none-any.whl
- Upload date:
- Size: 94.7 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: poetry/1.6.1 CPython/3.8.10 Linux/5.15.5-76051505-generic
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | d7d69efd04ffc778d83e621feee734f355d0b2d1fe18295e6ab61b67d2c52709 |
|
MD5 | 145d83f4dea6472a42d965bf9834476d |
|
BLAKE2b-256 | 2d4e88e8cdd3902add20dfcb15cc9ded3120ff12946c84a9482050047788e946 |