WebAudio API搭配Librosa load失效，请求排查问题

问题描述 #

我用前端代码通过Web Audio API录制音频，每一秒将音频块Blob发送至Flask后端，前端代码如下：

public startRecording(): void {
        try {
            navigator.mediaDevices.getUserMedia({ audio: true })
            .then((stream: MediaStream) => {
                this.mediaStream = stream;
                this.mediaRecorder = new MediaRecorder(stream);

                // Save audio data into chunks as it's being recorded
                this.mediaRecorder.addEventListener("dataavailable", (event: any) => {
                    const blob = new Blob([event.data], { type: 'audio/wav' });

                    let formData = new FormData();
                    formData.append('audio', blob);

                    fetch('http://localhost:8000/detect_onset', {
                        mode: 'no-cors',
                        method: 'POST',
                        body: formData
                    }).then((response) => {
                        console.log(response);
                    }).catch((error) => {
                        console.error(error);
                    });
                });
                // Send a `dataavailable` event every 1s
                this.mediaRecorder.start(1000);
            });
        } catch (error) {
            console.error(error);
        }
    }

后端用Librosa加载音频做 onset detection，代码如下：

@app.route('/detect_onset', methods=['POST'])
def detect_onset():
    audio_file = request.files.get('audio')
    y, sr = librosa.load(audio_file)
    # ... (onset detection code)

但Librosa无法识别音频格式，librosa.load不能正常工作，请问哪里出错了？

核心错误点 #

• MediaRecorder不支持直接生成WAV格式：浏览器的MediaRecorder默认输出格式并非WAV，大部分主流浏览器（Chrome、Firefox等）默认使用audio/webm; codecs=opus格式。手动设置Blob的type为audio/wav仅修改了MIME类型标记，实际音频编码格式并未改变，Librosa无法识别这种“伪WAV”文件。
• FormData未指定音频文件名：通过formData.append('audio', blob)上传时，后端拿到的文件没有扩展名，Librosa无法通过文件名推断格式，增加识别失败概率。
• no-cors模式限制请求：fetch使用mode: 'no-cors'会导致请求被浏览器限制，后端响应无法被前端正常接收，同时可能影响请求头的正确传递，不利于调试。

修正方案 #

1. 前端调整：正确处理音频格式与上传信息 #

先确认浏览器支持的MediaRecorder格式，再调整Blob处理和FormData上传逻辑：

public startRecording(): void {
    try {
        navigator.mediaDevices.getUserMedia({ audio: true })
        .then((stream: MediaStream) => {
            this.mediaStream = stream;
            // 优先选择Librosa可识别的格式，如audio/webm
            const recorderOptions = { mimeType: 'audio/webm; codecs=opus' };
            if (!MediaRecorder.isTypeSupported(recorderOptions.mimeType)) {
                console.warn('指定格式不支持，使用浏览器默认格式');
            }
            this.mediaRecorder = new MediaRecorder(stream, recorderOptions);

            this.mediaRecorder.addEventListener("dataavailable", (event: any) => {
                // 保留MediaRecorder实际输出的Blob格式，不强行修改type
                const blob = event.data;

                let formData = new FormData();
                // 第三个参数指定带扩展名的文件名，帮助后端识别格式
                formData.append('audio', blob, `audio_chunk_${Date.now()}.webm`);

                fetch('http://localhost:8000/detect_onset', {
                    // 移除no-cors，后端配置CORS解决跨域
                    method: 'POST',
                    body: formData
                }).then((response) => {
                    return response.json(); // 可正常解析后端响应
                }).then((data) => {
                    console.log('后端响应:', data);
                }).catch((error) => {
                    console.error(error);
                });
            });
            this.mediaRecorder.start(1000);
        });
    } catch (error) {
        console.error(error);
    }
}

2. 后端调整：配置CORS并兼容音频格式 #

• 先安装Flask-CORS解决跨域问题：

pip install flask-cors

• 修改后端代码：

from flask import Flask, request
from flask_cors import CORS
import librosa

app = Flask(__name__)
CORS(app)  # 允许跨域请求

@app.route('/detect_onset', methods=['POST'])
def detect_onset():
    audio_file = request.files.get('audio')
    try:
        # sr=None保留音频原采样率，提升识别兼容性
        y, sr = librosa.load(audio_file, sr=None)
        # 后续onset detection逻辑
        return {'status': 'success', 'sample_rate': sr}
    except Exception as e:
        return {'status': 'error', 'message': str(e)}, 400

3. 可选：前端转WAV格式（仅当必须使用WAV时） #

如果后端强制要求处理WAV格式，可以使用第三方库（如audio-recorder-polyfill）将MediaRecorder的输出转码为WAV，但这种方式会增加前端性能开销，仅在必要时使用。

内容的提问来源于stack exchange，提问作者Yongcong Luo