设备锁定时停止播放 HTML5 音频（Android 和 iOS）答案

【问题标题】：Stop HTML5 audio from playing when device is locked (Android & iOS)设备锁定时停止播放 HTML5 音频（Android 和 iOS）
【发布时间】：2013-11-04 13:27:51
【问题描述】：

我正在开发一个具有循环音乐和音效的 HTML5 游戏。我正在使用来自createjs suite 的soundjs library。

当我在 Android 设备和 iOs 设备上最小化浏览器时，声音会继续播放。甚至在设备被锁定时也是如此！跨浏览器也是如此，（Safari、Chrome、Android Native、Firefox）

是否有解决此问题的简单方法，或者检测页面处于非活动状态并禁用声音是更可能的解决方案？

我试过这个，认为当页面关闭时超时会触发，但事实并非如此。 :(

var timeout = -1;
setInterval(function(){
     if(timeout!=-1) clearTimeout(timeout);
     timeout = setTimeout(function(){
         AudioManager.setMute(true);
     }, 200);
, 100);

【问题讨论】：

您是否尝试过使用Page Visibility API？
@ThiefMaster 我没有，它看起来很有趣，但没有足够的设备支持。仅支持最新的移动操作系统 iOS 7 和 android 4.4。 caniuse.com/#search=visibility
SoundJS 不会在内部处理这个问题。我还打算推荐 Page Visibility API，以检测页面失去焦点并禁用声音作为响应。祝你好运。
@OJay 我明白这一点。 Page Visibility API 似乎是最好的（唯一的）解决方案。尽管它的跨平台兼容性很差。只有android 4.4（KitKat，尚未发布）和iOS7才支持。所以这个解决方案实际上只能为 25% 的用户解决问题（使用以前发布的游戏中的 Google Analytics）

标签： javascript html audio

【解决方案1】：

对我有用的是以下内容（使用 jQuery v2.1.4）：

// Declare soundtrack as SoundJS object
soundtrack = createjs.Sound.play("main", {loop: -1});

$(window).focus(function() {
    // Unpause when window gains focus
    soundtrack.paused = false;
}).blur(function() {
    // Pause when window loses focus
    soundtrack.paused = true;
});

只要 Safari 窗口失去焦点，它就会暂停配乐。当它重新获得焦点时，它将恢复。在 iPhone Safari iOS 9 上为我工作。

【讨论】：