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

Posted 2023-02-25

【中文标题】整个网站的通用音量控制？

【英文标题】：Universal volume control for whole website?

【发布时间】：2013-05-19 21:14:24

【问题描述】：

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

玩家基于此插件：http://kolber.github.io/audiojs/docs/

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

【问题讨论】：

您对每种类型的播放器都有程序控制吗？我将假设<audio> 元素是肯定的，但是Flash 播放器呢？可以通过 javascript 控制吗？

@Kai 抱歉，没有说明这一点。是的，我确实可以控制音频，例如播放、暂停倒带等。我的播放器基于以下插件：kolber.github.io/audiojs/docs

【参考方案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。

【讨论】：

嗨，是的，我听说过 SoundManager，但决定采用不同的、更轻量级的方法，我更新了答案以包含我正在使用的插件，以处理所有音频，我会真的不想用soundmanager。

仅供参考，SoundCloud 使用 SoundManager2 作为其音频播放器。您正在寻找的内容超出了 Audio.js 提供的范围（这只是 HTML5 音频元素的 polyfill）。

好吧，我明白了，我在想有可能以某种方式控制音频的音量，作为一般的事情，哦，好吧；/