在浏览器中启用/禁用同步音轨答案

【问题标题】：Enable/disable simultaneous audio tracks in the browser在浏览器中启用/禁用同步音轨
【发布时间】：2016-06-21 10:12:32
【问题描述】：

我想同时同步播放多个音轨，并且能够在播放时以编程方式启用或禁用音轨。

我尝试将多个音频流放在一个 mp4 文件中，然后像这样设置轨道的启用属性：

mySong.audioTracks[n].enabled

但该技术目前仅在 IE 和 Safari 中使用 supported。

这是否可以通过似乎具有更好浏览器支持的 Web Audio API 来完成？

【问题讨论】：

标签： javascript html audio web-audio-api

【解决方案1】：

如果您使用的是HTML5 Audio，则可以使用.play() 和.pause() 命令，详见MDN's guide。

假设您有一个包含五个 HTML5 音频元素的页面，每个元素都有 .song1 类。如果您想同时停止和启动所有曲目，您可以指定按钮运行：

document.getElementsByClassName("song1").play();

和

document.getElementsByClassName("song1").pause();

如果您想在其他曲目继续播放时将其静音，您也可以通过编程将其音量设置为 0：

getElementsByTagName("audio")[0].volume=0; <!-- Mute track 1 -->

或

getElementsByTagName("audio")[2].volume=0; <!-- Mute track 3 etc -->

希望这会有所帮助！

【讨论】：

这种技术的问题是不能保证轨道会开始并保持同步。
我以前从未使用过这种方法，所以我不知道它的缺点。什么会导致音频不同步？

【解决方案2】：

对于可能的 WebAudio 解决方案，假设您已将 mp4 文件解码为 AudioBufferSource、s 和 n 频道。

然后：

var splitter = context.createSplitter(n);
s.connect(splitter);

for (k = 0; k < n; ++k) {
  gains[k] = context.createGain();
  spitter.connect(gains[k], k, 0);
  gains[k].connect(context.destination);
}

// To disable channel m:
gains[m].gain.value = 0;
// To re-enable channel m:
gains[m].gain.value = 1;

您可以通过让每个频道淡入淡出变得更加精彩。

【讨论】：