HTML Video元素如何选择及播放单视频文件内的多条音频流

1. 如何指定需要播放的音频流 #

使用HTML5标准的Media Tracks API即可实现音频流切换，操作逻辑如下：

• 监听video元素的loadedmetadata事件，确保视频元数据加载完成后读取轨道列表
• 通过video元素的audioTracks属性获取所有内嵌音频轨道，你的OBS录制文件对应返回6条轨道，和ffprobe读取的index为1~6的音频流一一对应
• 将目标音频轨道的enabled属性设为true，其余音频轨道enabled属性设为false，即可完成单音频流指定播放

参考代码示例：

const videoEle = document.querySelector('video');
videoEle.addEventListener('loadedmetadata', () => {
  const allAudioTracks = videoEle.audioTracks;
  // 示例：切换到ffprobe中index为3的第3条音频流，对应audioTracks索引为2
  for (let i = 0; i < allAudioTracks.length; i++) {
    allAudioTracks[i].enabled = i === 2;
  }
});

注：部分旧版Chromium内核浏览器默认未开启Audio Tracks支持，可通过浏览器实验性配置开启，也可基于Media Source Extensions（MSE）手动解析媒体流实现全兼容。

2. 是否支持同时播放多条音频流 #

支持，操作方式如下：

• 将需要同时播放的多条音频轨道的enabled属性全部设为true即可，浏览器会自动完成多轨音频的混音输出，无需额外处理
• 若需要自定义每条音频流的音量、声道等参数，可配合Web Audio API将轨道接入AudioContext节点，实现自定义混音规则

参考代码示例：

videoEle.addEventListener('loadedmetadata', () => {
  const allAudioTracks = videoEle.audioTracks;
  // 示例：同时播放第1条（ffprobe index=1）和第3条（ffprobe index=3）音频流
  for (let i = 0; i < allAudioTracks.length; i++) {
    allAudioTracks[i].enabled = i === 0 || i === 2;
  }
});

注：你提供的视频文件中所有音频流均为44100Hz采样率的AAC立体声格式，格式统一，多轨混音无兼容性问题。

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