使用MediaSource API流式播放.aac音频时续播失败问题求助

我尝试用JavaScript的MediaSource API流式播放.aac音频文件，遇到以下问题：

• 第一个音频分片加载到媒体源缓冲区后，音频可正常播放
• 追加第二个分片时，播放直接冻结，new Audio()实例在本该播放第二个分片时触发错误

同时，MP3格式的流式播放能正常运行，但分片切换时存在明显音频失真，推测是MP3自身结构缺陷和有损压缩特性导致的。

相关代码 #

sourceopen事件处理逻辑 #

mediaSource.addEventListener("sourceopen", async () => {
  source = mediaSource.addSourceBuffer(chunks.aac.mime); // audio/aac
  
  // 加载第一个音频分片
  const arrayBuffer = await fetchDecode(
    chunks.aac.url, // 音频文件URL
    chunks.aac.segments()[0] // 分片的字节范围
  );

  // 将第一个分片加入缓冲区
  source.appendBuffer(arrayBuffer);
  segmentsFetched++;
  chunkDecodedBlock.innerHTML = `已解码分片: ${segmentsFetched}/${
    chunks.aac.segments().length
  }`;

  audio.addEventListener("error", (event) => {
    // 第二个分片该播放时触发此错误
    console.error("Audio元素错误:", event);
  });
});

缓冲区更新逻辑（点击播放按钮后执行） #

const updateBuffer = async () => {
  // 所有分片加载完成则停止
  if (segmentsFetched === chunks.aac.segments().length) return;

  // 加载下一个音频分片
  const arrayBuffer = await fetchDecode(
    chunks.aac.url,
    chunks.aac.segments()[segmentsFetched]
  );

  source.appendBuffer(arrayBuffer);
  segmentsFetched++;
};

分片字节范围示例 #

chunks.aac.segments()返回的是指定每个分片字节范围的数组，结构如下：

[
  [0, 1234],
  [1235, 2323]
  ...
]

错误截图 #

问题排查与解决方案 #

AAC播放失败核心原因 #

AAC播放失败的核心问题是分片未按AAC帧边界切割：

• AAC是基于帧的编码格式，每个分片必须包含完整的AAC帧（从ADTS头开始到帧结束）。你当前按固定字节数切割的方式，大概率把AAC帧切在了中间，导致MediaSource无法解析第二个分片，触发解码错误并冻结播放。

具体修复步骤 #

1. 按AAC帧边界切割分片
   AAC的ADTS头包含帧长度信息，需要先解析音频文件的ADTS头，计算每个完整帧的字节长度，再以此为依据划分分片，确保每个分片都是整数个完整AAC帧。示例解析逻辑：

   function getAACFrameLength(buffer) {
     if (buffer.byteLength < 7) return 0;
     const view = new DataView(buffer);
     // 从ADTS头中提取帧长度（第4-7字节的后13位）
     return ((view.getUint16(3) & 0x0FFF) << 8) | view.getUint8(5);
   }
   

2. 等待缓冲区就绪后再追加分片
   SourceBuffer有updating状态，必须等该状态变为false后才能调用appendBuffer，否则会引发缓冲区冲突。修改updateBuffer逻辑：

   const updateBuffer = async () => {
     if (segmentsFetched === chunks.aac.segments().length) return;
     // 等待缓冲区结束当前更新操作
     while (source.updating) {
       await new Promise(resolve => source.addEventListener('updateend', resolve, { once: true }));
     }
     const arrayBuffer = await fetchDecode(
       chunks.aac.url,
       chunks.aac.segments()[segmentsFetched]
     );
     source.appendBuffer(arrayBuffer);
     segmentsFetched++;
   };
   

3. 使用完整的MIME类型
   确保MIME类型包含AAC编码子类型，比如audio/aac; codecs="mp4a.40.2"，而非仅audio/aac，部分浏览器需要明确编码参数才能正确解析。

MP3失真问题优化建议 #

MP3分片失真确实和其帧结构相关，MP3帧的边信息依赖前一帧数据，即使按帧切割也可能出现衔接问题。可尝试：

• 确保MP3分片包含完整帧，且起始位置有MP3帧同步字（0xFFE）
• 给每个MP3分片添加极小的静音帧，缓解衔接时的失真

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