MediaRecorder分片音频Blob调用decodeAudioData解码失败求助

问题原因 #

核心问题在于：MediaRecorder通过timeslice生成的分片Blob并不是可独立解码的完整音频文件。

WebM/Opus格式需要完整的容器结构（包括文件头、轨道元数据等）才能被decodeAudioData正确解析。当你设置timeslice=100时，每个分片太短，甚至还没生成完整的音频帧或容器头部，直接解码必然失败；而设为1000时，第一个分片可能刚好包含了完整的初始容器头，所以能解码，但后续分片只是无头部的音频帧数据，缺少解码必需的元信息，因此同样报错。

解决方案 #

如果要实时计算音频振幅，不要通过MediaRecorder的分片Blob来处理，直接在音频采集阶段获取原始样本数据即可。推荐使用ScriptProcessorNode（兼容性更好，虽已标记废弃但仍可稳定使用）或AudioWorklet（现代标准，性能更优）来实现：

代码示例（实时计算振幅+同时录制）

const audioContext = new AudioContext({ sampleRate: 44100 });

// 使用ScriptProcessorNode实时获取音频样本计算振幅
const processor = audioContext.createScriptProcessor(4096, 1, 1);
processor.onaudioprocess = (event) => {
  const inputChannelData = event.inputBuffer.getChannelData(0);
  let maxAmplitude = 0;
  
  // 遍历样本计算当前最大振幅
  for (const sample of inputChannelData) {
    const amplitude = Math.abs(sample);
    if (amplitude > maxAmplitude) {
      maxAmplitude = amplitude;
    }
  }
  
  console.log('当前实时最大振幅:', maxAmplitude);
};

// 获取麦克风音频流
const stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100,
  },
});

// 连接音频流到处理器，完成实时数据获取链路
const source = audioContext.createMediaStreamSource(stream);
source.connect(processor);
processor.connect(audioContext.destination);

// 保留MediaRecorder的录制功能
const recorder = new MediaRecorder(stream, {
  mimeType: 'audio/webm; codecs=opus',
  audioBitsPerSecond: 128000,
});

const chunks = [];
recorder.ondataavailable = (e) => {
  chunks.push(e.data);
};

recorder.onstop = async () => {
  const fullBlob = new Blob(chunks, { type: 'audio/webm; codecs=opus' });
  // 合并后的完整Blob包含完整容器结构，可正常解码
  const audioBuffer = await audioContext.decodeAudioData(await fullBlob.arrayBuffer());
  const channelData = audioBuffer.getChannelData(0);
  
  let totalMaxAmplitude = 0;
  for (const sample of channelData) {
    const amplitude = Math.abs(sample);
    if (amplitude > totalMaxAmplitude) {
      totalMaxAmplitude = amplitude;
    }
  }
  
  console.log('录制完成后整体最大振幅:', totalMaxAmplitude);
  setUrl(URL.createObjectURL(fullBlob));
};

recorder.start();

关键说明 #

1. 直接从音频流的原始样本计算振幅，既避免了解码分片Blob的问题，也保证了实时性。
2. 录制完成后合并所有分片得到的完整Blob，包含了完整的WebM容器结构，因此可以正常用decodeAudioData解析。
3. 如果追求更现代的高性能实现，建议将ScriptProcessorNode替换为AudioWorklet，它更适合复杂音频处理场景，且没有主线程阻塞问题。

内容的提问来源于stack exchange，提问作者Johannes Klauß