React应用解码.mov文件音频数据时出现DOMException错误

你遇到的问题核心是：AudioContext.decodeAudioData只能解码裸音频流（比如纯AAC二进制数据），而MOV是封装容器，包含视频轨、音频轨及元数据，直接读取整个文件的ArrayBuffer丢给该API，它无法解析容器结构，因此报错。MP4能成功是因为浏览器对MP4容器的解析做了额外兼容，但MOV的封装格式不在decodeAudioData的处理范围内。

下面是可行的解决方案，利用浏览器原生的视频解码能力提取音频：

方案：通过Video元素+MediaRecorder提取音频 #

这个方法让浏览器自动处理MOV容器的解析，提取音频轨后录制为音频文件：

const extractAudioFromVideo = async (file) => {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.muted = true;
    video.src = URL.createObjectURL(file);

    video.onloadedmetadata = async () => {
      try {
        // 提取视频中的音频轨
        const audioTrack = video.captureStream().getAudioTracks()[0];
        if (!audioTrack) {
          reject(new Error('视频文件中未检测到音频轨'));
          return;
        }

        // 初始化MediaRecorder，指定输出格式
        const mediaRecorder = new MediaRecorder(
          new MediaStream([audioTrack]),
          { mimeType: 'audio/mp4' } // 现代浏览器均支持，如需WAV可改为audio/wav
        );

        const audioChunks = [];
        mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
        mediaRecorder.onstop = () => {
          const audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType });
          URL.revokeObjectURL(video.src); // 清理内存
          resolve(audioBlob);
        };

        mediaRecorder.start();
        // 播放视频直到结束，触发录制停止
        video.play().then(() => {
          setTimeout(() => mediaRecorder.stop(), video.duration * 1000);
        }).catch(err => {
          reject(err);
          URL.revokeObjectURL(video.src);
        });
      } catch (err) {
        reject(err);
        URL.revokeObjectURL(video.src);
      }
    };

    video.onerror = (err) => {
      reject(err);
      URL.revokeObjectURL(video.src);
    };
  });
};

关键注意事项 #

• 用户交互限制：浏览器禁止自动播放视频/音频，必须在用户触发的事件（比如按钮点击）中调用这个函数，否则会触发播放失败。
• 格式兼容性：audio/mp4格式在Chrome、Safari（包括iOS）都支持；若需要WAV格式，可将mimeType改为audio/wav，但文件体积会大幅增加。
• 内存清理：务必调用URL.revokeObjectURL释放视频资源，避免内存泄漏。

如果需要将输出的音频转成WAV格式，可在得到音频Blob后，再用AudioContext读取解码并转换，此时因为Blob是纯音频数据，decodeAudioData就能正常工作了。

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