最小化 iPad 浏览器 Safari 时仍在播放音频

Posted 2023-02-25

【中文标题】最小化 iPad 浏览器 Safari 时仍在播放音频

【英文标题】：Audio is still playing while minimize iPad browser safari

【发布时间】：2013-07-09 03:25:45

【问题描述】：

我开发的游戏是html5、Jquery、javascript，我需要预加载几个音频。这些音频正在一一播放，但是当我将 iPad 最小化时，音频仍在付费。 当浏览器最小化时，任何人都可以帮助暂停音频。当浏览器进入前台时，应该播放音频。

【参考方案1】：

为您提供完整的解决方案，我已经完成了一半。到目前为止，这是我所拥有的：

var audio = document.getElementsByTagName('audio')[0];
window.onpageshow = function() 
    audio.play();

window.onpagehide = function() 
    audio.pause();

因此，只要您在关闭 Safari 时在应用程序选项卡上，它就会暂停音频。并在您开始备份时播放。当您更改标签时它不会停止。

如果您的应用程序是apple-mobile-web-app-capable，当您使用主屏幕按钮打开应用程序时，这将触发onpageshow，并在您关闭它时暂停它。它不会完全暂停，因为打开它会迫使它从头开始。您必须使用 localStorage 或其他工具捕捉您在轨道中的位置，然后在您打开它时将 currentTime 设置为该值。

根据caniuse.com，看起来你可以在ios 7中使用Visibility API

为了历史，我至少要陈述一些我尝试过的其他事情。

window.onblur

将 requestAnimationFrame 与 setTimeout 结合使用（适用于桌面，但不适用于 iOS）

var t;
requestAnimationFrame(function checkWindow() 
    if ( audio.paused ) 
        audio.play();
    
    clearTimeout(t);
    t = setTimeout(function() 
        audio.pause();
    , 32);
);

【讨论】：

非常感谢 Kalley，有价值的解决方案。

【参考方案2】：

我建议您使用page visibility API，它会为您提供一个事件，告诉您页面的可见性何时发生变化。

function handleVisibilityChange() 
    if (document.hidden)
        stopAllSounds();
    else
        playAllSounds();
    


document.addEventListener("visibilitychange", handleVisibilityChange, false);

stopAllSounds 和 playAllSounds 将按照您认为合适的方式定义，但是当 Safari 最小化和最大化时会触发此事件。它适用于 android 设备和all modern platforms

【参考方案3】：

希望我回答的时间不晚。我发现以下解决方案适用于桌面和 ios 设备（尚未签入 android）

$(window).on("blur focus", function(e) 
var prevType = $(this).data("prevType");

if (prevType != e.type)    //  reduce double fire issues
    switch (e.type) 
        case "blur":
            // do work
            your_audio.pause();
            break;

        case "focus":
            // do work
            your_audio.play();
            break;
    


$(this).data("prevType", e.type);
)

PS：your_audio 是一个变量，你必须定义它。

我找到了这个解决方案here