概览

这是一个用于录制音频的Dash组件。该组件使用microphone-stream构建。该组件仍在开发中，尚未准备好用于生产。

安装

只需使用pip安装软件包

pip install dash-recording-components

并导入AudioRecorder组件

from dash_recording_components import AudioRecorder

使用场景

目前，正在构建的Dash组件只有一个：AudioRecorder，在dash_recording_components包中，它是由src/lib/components/AudioRecorder.react.js中的React组件构建的。下面是一个使用该组件的应用程序示例（注意，这还使用了优秀的库soundfile和numpy，以wav文件格式保存音频以供在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)

开发和贡献

欢迎贡献！要开始，请克隆存储库并按照以下步骤操作

• 创建Poetry环境并安装所有必需的开发依赖项：poetry install --dev
• 安装webpack
• 安装npm
• npm install 安装依赖项
• 构建js文件：npm run build:js
• 构建Dash组件（Python模块）：npm run build:py

React组件（src/lib/components）中的更改，例如公开新属性或更新音频收集逻辑，需要运行上述步骤5和6。现有的自动生成的Python模块不应被编辑。