在iOS设备上是否有可能控制HTML5音频的音量？

Question

我使用html5音频库Buzz来为浏览器游戏添加声音。有一个切换按钮可以静音和取消静音，这在桌面和Android设备上运行良好。不幸的是，在IOS上，音频标签似乎相当有限，因此我无法在Mobile Safari中静音音频（请参见https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html）：

在iOS设备上，音量始终在用户的物理控制下。JavaScript中不能设置音量属性。读取音量属性始终返回1。

你知道任何解决方法来控制在Mobile Safari中的html5音频标签的音量吗？

- josi

---

苹果似乎非常重视让用户始终掌控其设备发出声音的音量。如果存在任何解决方法，很可能会在发现后迅速进行“修复”。 - Frédéric Hamidi

截至2021年，iOS系统中这个问题是否仍然存在？ - Nice Books

Answer 1

想要在iOS上添加音量更改支持，而不必从HTML5音频重写到Web音频，您可以通过createMediaElementSource将这些音频解决方案组合使用。

请查看Mozilla网站上的更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource

- Alex Zheka

---

很好的解决方案。但是不要介意将创建AudioContext和play操作移动到onclick内部（著名的苹果政策）。否则你会得到静音。在iOS 12.4.1 / iphone7 / chrome77上进行了检查。 - shukshin.ivan

自从iOS 13以来，使用增益节点来控制媒体元素源的音量会导致音频失真。我正在寻找另一种解决方法，但目前还没有结果。 - Bruce Hamilton

Answer 2

我一直认为动态音量控制和交叉淡入淡出是不可能的，正如我们所知，苹果公司已经规定了这一点。除了......显然Kodo Games的人（特别是Nicola Hibbert？）已经做到了，并将代码提供给任何人使用。我刚在iOS 8上检查过了。淡入和交叉淡入淡出似乎都可以工作！请查看以下网站（新网站）：开始使用Web Audio API。

- Scott Witte

---

谢谢Scott，那条链接真的很有帮助！ - ffxsam

这个链接现在只会跳转到一个页面，上面写着“未找到”。 - kris

很不幸。好吧，我后来发现有很多资源可以帮助你流畅地使用Web音频。我已经更新了上面的链接，提供了我喜欢的一个，但还有很多其他资源。只需在Google中搜索“Web音频API教程”即可。 - Scott Witte

该链接涉及Web Audio API，但问题涉及html5音频元素。这是一个可行的解决方法，但Web Audio API有一个很大的缺点，即不允许流式传输声音文件。 - Bruce Hamilton

Answer 3

看起来你可以设置muted属性而不是更新音量值。在iOS 15上有效。

  /**
   * Set volume of sound object
   * @param volume
   */
  setVolume (volume) {
    const muted = volume === 0
    // iOS workaround when volume is 0
    this.sound.muted = muted
    this.sound.volume = volume
  }

- mccp

Answer 4

我通过停止所有声音并设置一个变量 isMuted 为 true 或 false 来解决这个问题，这样我可以在任何播放声音的地方进行检查。

// set the variable
var isMuted = false;

// toggle audio
function toggleMute() {

    var toggleAudioBtn = $(".toggleAudio");

        if (isMuted == false) {
            sounds.stop();
            isMuted = true;
            toggleAudioBtn.css("background-image", "url('images/ui/btn_audio_mute.png')");
        } else {
            isMuted = false;
            toggleAudioBtn.css("background-image", "url('images/ui/btn_audio.png')");
        }

};

// for every sound check if sound is muted
if(isMuted == false) {
    sound.play();
}

- josi

---

这意味着音频播放已停止，这与静音不同。 - Armen

@Armen 您是对的。我只是想分享一下我的解决方法，因为在我的情况下这已经足够了，尽管它仍然没有一个合适的解决方案。 - josi