关闭 iOS Safari 时停止 HTML5 音频循环

Question

好的，我有这么简单的东西：

<audio autoplay='autoplay' loop='loop' id='audio' controls>
  <source src='http://www.w3schools.com/html/horse.ogg'/>
  <source src='http://www.w3schools.com/html/horse.mp3'/>
</audio>

现在，当我在 iOS 设备上播放音频时，它可以正常循环播放，然而，当我关闭浏览器窗口或切换标签时，它只会继续循环播放，这是唯一的方法暂停它是如果我关闭浏览器选项卡。我尝试删除 loop='loop' 并使用 JavaScript 重播 onended，这可行，但对于大约 1.5 分钟长的音频，它仍然很烦人。 但这也不起作用，因为即使浏览器未打开，ended 事件也会触发。

Demo 其中的声音是我在网上找到的第一个声音，但请注意，我的实际声音很长，所以在关闭浏览器窗口时我确实需要pause。

我试过暂停 onblur、onunload 和 onbeforeunload 无济于事。有没有办法阻止音频在后台播放？

Answer 1

设法找到解决方案：

利用循环来检查用户是否在网页上。存储时间。

var lastSeen;
var loop = function (){
    lastSeen = Date.now();
    setTimeout(loop, 50);
};
loop();

var music = document.getElementById('music');
music.addEventListener('timeupdate', function (){
    if(Date.now() - lastSeen > 100){
        this.pause();
    }
}, false);

这大概是我的文件的样子。由于timeupdate 事件会在音频元素上持续触发，如果它正在播放，我只需要检查我的循环最后一次调用的时间。如果它在 100 多毫秒前被调用，我会暂停音乐。在我测试过的 iPad 上表现出色。