JavaScript提取本地MPEG-1/2文件音频解码报错，求MPEG-1解复用方案

你遇到的问题本质是AudioContext.decodeAudioData只能处理解复用后的原始音频数据，而MPEG-1/2视频是将音频流（通常是MP1/MP2/MP3）和视频流封装在同一个文件里的Program Stream（PS），直接把整个视频文件的ArrayBuffer传给它，它没办法区分音频和视频流，自然会解码失败。下面给你两个可行的解决方案：

方案一：利用浏览器原生MediaSource + VideoElement自动处理解复用 #

这是最简单可靠的方案，浏览器原生的媒体处理管道已经内置了各种封装格式的解复用器，包括MPEG-1/2。你不需要自己处理解复用逻辑，只需要把视频加载到VideoElement，再通过AudioContext获取音频源即可：

async function extractAudioFromVideo(videoFileURL) {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const video = document.createElement('video');
  video.src = videoFileURL;
  video.muted = true; // 避免自动播放声音干扰
  video.preload = 'metadata';

  await new Promise((resolve, reject) => {
    video.onloadedmetadata = resolve;
    video.onerror = reject;
  });

  // 创建媒体元素音频源，对接AudioContext
  const source = audioContext.createMediaElementSource(video);
  // 创建ScriptProcessorNode获取实时音频数据（适配画布绘制需求）
  const processor = audioContext.createScriptProcessor(4096, 2, 2);
  
  source.connect(processor);
  processor.connect(audioContext.destination);

  processor.onaudioprocess = (e) => {
    // 这里拿到实时音频缓冲区，直接用于画布绘制
    const inputBuffer = e.inputBuffer;
    requestAnimationFrame(() => this.updateCanvas(inputBuffer));
  };

  // 触发播放后才能获取音频数据，注意处理浏览器自动播放限制
  video.play().catch(err => console.error('播放失败:', err));
}

// 调用示例
extractAudioFromVideo(this.props.videoFileURL).catch(this.onDecodeError);

这个方案的优势：

• 无需额外引入第三方库，浏览器原生支持
• 自动适配多种封装格式（MP4、MPEG-1/2、WebM等）
• 实时获取音频数据，完美匹配画布绘制的需求

方案二：使用纯JS的MPEG-1 PS解复用库手动提取音频流 #

如果你需要更底层的控制，或者遇到浏览器对MPEG-1的MediaSource支持不佳的情况，可以找专门的纯JS解复用库解析MPEG-1的Program Stream，提取出独立的音频流后再解码。

大致流程如下：

1. 用FileReader读取本地视频文件为ArrayBuffer
2. 用解复用库解析文件，分离出音频流（多为MP2/MP3格式）
3. 将音频流的原始数据传给audioContext.decodeAudioData

示例代码框架：

async function extractAudioWithDemuxer(videoFile) {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  // 1. 读取本地文件为ArrayBuffer
  const arrayBuffer = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsArrayBuffer(videoFile);
  });

  // 2. 用MPEG-1 PS解复用库提取音频流
  // 这里假设你引入了对应解复用库（比如mpeg-ps-demux）
  const demuxer = new MpegPsDemuxer();
  const audioStreamBuffer = demuxer.extractAudioTrack(arrayBuffer);

  // 3. 解码音频流获取AudioBuffer
  audioContext.decodeAudioData(
    audioStreamBuffer,
    (buffer) => {
      this.currentBuffer = buffer;
      this.props.setAudioBuffer(buffer);
      requestAnimationFrame(this.updateCanvas);
    },
    this.onDecodeError
  );
}

这个方案适合需要完全控制音频提取流程的特殊场景，但需要自行寻找并引入可靠的解复用库。

注意事项 #

• 确保videoFileURL是通过URL.createObjectURL(file)生成的Blob URL，避免跨域问题
• 现代浏览器对MPEG-1的支持已比较完善，但建议测试Chrome、Firefox、Safari等主流浏览器的兼容性
• 使用方案一时，需注意浏览器的自动播放限制，最好在用户交互（比如点击按钮）后再触发视频播放

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