MediaRecorder API多次调用requestData生成多音频Blob报错问题

你遇到的核心问题是MediaRecorder实例在触发requestData()或stop()后会进入inactive状态，无法再次被复用。虽然你正确保留了麦克风的MediaStream，但重复使用同一个已失效的MediaRecorder实例，会导致后续生成的Blob不完整或无法被识别，最终抛出"Failed to load because no supported source was found"错误。

解决思路与实现步骤 #

1. 持久化麦克风媒体流
   首次授权获取MediaStream后，用ref保存该实例，全程不关闭，避免重复请求权限。

2. 每次录制重新初始化MediaRecorder
   旧的MediaRecorder实例在完成一次数据捕获后会进入不可用状态，因此每次点击"开始录制"时，都要基于持久化的MediaStream创建新的MediaRecorder实例。

3. 正确控制录制状态与数据捕获

   • 开始录制时启动新的MediaRecorder，绑定ondataavailable事件处理Blob数据。
   • 停止录制时调用requestData()触发数据捕获，随后调用stop()让MediaRecorder进入终止状态，确保后续可重新初始化。

4. Blob数据的正确拼接与播放
   每次捕获的音频片段Blob存入数组，播放时将所有片段拼接成完整的Blob对象，注意指定与MediaRecorder一致的MIME类型（比如audio/webm）。

修正后的示例代码 #

import { useState, useRef, useCallback } from 'react';

export default function MicRecorder() {
  const [isRecording, setIsRecording] = useState(false);
  const [audioSegments, setAudioSegments] = useState<Blob[]>([]);
  const mediaStreamRef = useRef<MediaStream | null>(null);
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);

  const toggleRecording = useCallback(async () => {
    if (isRecording) {
      // 停止录制流程
      if (mediaRecorderRef.current?.state !== 'inactive') {
        mediaRecorderRef.current.requestData();
        mediaRecorderRef.current.stop();
      }
      setIsRecording(false);
      return;
    }

    // 开始录制流程
    if (!mediaStreamRef.current) {
      // 首次请求麦克风权限
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      mediaStreamRef.current = stream;
    }

    // 创建新的MediaRecorder实例
    const recorder = new MediaRecorder(mediaStreamRef.current, { mimeType: 'audio/webm' });
    mediaRecorderRef.current = recorder;

    // 捕获音频数据片段
    recorder.ondataavailable = (e) => {
      if (e.data.size > 0) {
        setAudioSegments(prev => [...prev, e.data]);
      }
    };

    recorder.start();
    setIsRecording(true);
  }, [isRecording]);

  const playRecording = useCallback(() => {
    if (audioSegments.length === 0) return;
    // 拼接所有片段为完整音频Blob
    const fullAudioBlob = new Blob(audioSegments, { type: 'audio/webm' });
    const audioUrl = URL.createObjectURL(fullAudioBlob);
    const audio = new Audio(audioUrl);
    audio.play();

    // 可选：播放后清空片段数组，准备下一次录制
    // setAudioSegments([]);
  }, [audioSegments]);

  return (
    <div>
      <button onClick={toggleRecording}>
        {isRecording ? '停止录制' : '开始录制'}
      </button>
      <button onClick={playRecording} disabled={audioSegments.length === 0}>
        播放录制内容
      </button>
    </div>
  );
}

关键细节说明 #

• 避免复用同一个MediaRecorder实例，每次录制都新建，确保实例处于可用状态。
• requestData()必须在MediaRecorder处于recording状态时调用，否则会触发异常。
• 播放时的Blob拼接必须使用与录制时一致的MIME类型，否则浏览器无法识别音频格式。

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