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

Posted 2023-03-14

【中文标题】关闭 iOS Safari 时停止 HTML5 音频循环

【英文标题】：Stop HTML5 audio from looping when iOS Safari is closed

【发布时间】：2013-01-19 13:01:35

【问题描述】：

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

<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 无济于事。有没有办法阻止音频在后台播放？

【问题讨论】：

曾问过同样的问题：***.com/questions/10019990/… 但还没有结果

@Ani 设法弄明白了！也发布了关于您的问题的答案:)

【参考方案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 上表现出色。

【讨论】：

我将它与 requestAnimationFrame 而不是“timeupdate”监听器结合起来，这样我就可以重新加载可能在选项卡失去焦点时从缓存中踢出的图像。虽然此方法有效，但它也会在页面滚动和代码执行时间超过循环间隔的任何地方注册，这是不受欢迎的行为。

图像从缓存中被踢出并且不重新加载自己？从来没有听说过。页面滚动问题你可以通过一个在滚动开始时切换的简单标志来解决。我知道的执行时间问题，但我真的想不出一个解决方案。我认为你能做的最好的就是将100 增加到更大的值