Question

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

Answer 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设置为该位置。

根据Visibility API

，您似乎可以在iOS 7中使用caniuse.com

只是出于历史的考虑，我至少会陈述一些我尝试的其他事情。

window.onblur

将requestAnimationFrame与setTimeout一起使用（这适用于桌面，但不适用于iOS）

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

Answer 2

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

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

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

stopAllSounds和playAllSounds将根据您的需要进行定义，但是当Safari最小化并最大化时，此事件将会触发。它适用于Android设备和all modern platforms

Answer 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

音频仍然在播放，同时最大限度地减少了iPad浏

3 个答案: