javascript - 整个网站的通用音量控制？

Question

我的网站在一页上有几个音频播放器。大多数这些音频播放器将依赖于 html5 <audio>元素，但是对于某些站点，有一个 flash/<object>倒退。我正在考虑为每个播放器添加音量控制，但没想到我可以为所有播放器使用一个通用音量控制(因为一次只能有一个播放器播放)我尝试研究这个主题，但找不到任何有用的信息。所以我决定问问社区，有没有办法，不管是<audio>还是flash fallback，来控制整个网站的音量？也许是 jQuery 解决方案，一些 html5 魔法？或者需要做什么才能使它起作用？

播放器基于此插件:http://kolber.github.io/audiojs/docs/

编辑:与声音云非常相似，它们在标题中具有音量控制，控制所有播放器。

Answer 1

如果您正在寻找一种简化音频实现的方法，我建议您查看 SoundManager2它抽象了处理不支持 HTML5 音频(和/或特定音频编解码器)的浏览器。无论是使用原生音频还是 Flash 后备，它的 API 的工作方式都是一样的。

然后你只需要创建一些全局音频引用来保存你当前正在播放的任何音频:

var myAudio,
    myVolume = 100,
    $volume = $('#volume');

$volume.slider({
  value: myVolume,
  min: 0,
  max: 100,
  step: 0.1,
  slide: function(e, ui){
    if (myAudio) myAudio.setVolume(ui.value);
  },
  stop: function(e, ui){
    myVolume = ui.value;
  }
});

// every time you wan to play a new sound
myAudio = soundManager.createSound({
  url: '/path/to/song.mp3'
  volume: $volume.slider('value')
});

并且每次用户点击某个东西来播放另一段音频时，只需将新的声音对象分配给 myAudio .