浏览器中的 HTML5 可以在 iOS 锁屏上播放连续音频吗？

Question

我一直在努力追查这个问题，但似乎没有一致的答案。如果我有一个网站尝试使用 HTML 5 音频元素连续播放多首歌曲（想想播放列表），它能否继续在 iOS 锁定屏幕上运行？

对于某些背景，this answer 似乎表明它是可能的。但随后this article 暗示它不是。

我尝试按照 Apple 推荐的最接近的示例（如 found here）来复制它。我使用的是普通的、香草的 javascript 和 HTML，没什么特别的。我完全复制了他们的示例，只是用音频标签替换了视频标签，随机挑选了两首 mp3 歌曲。它所做的只是等待一首歌曲结束，然后切换 src，加载并播放下一首曲目。

当我在网站上点击 Play 时，我会锁定 iPhone。将播放第一首歌曲，然后停止。它不会继续到下一首歌曲。

如果网站打开到页面，它将正确过渡到下一首歌曲。在 Android 上，即使手机被锁定，它也会继续播放下一首歌曲。

我在 iOS 11 和 12 上进行了尝试，但均未成功。我已经阅读了许多关于当网站不在前台时如何停止 javascript 以及 iOS 如何需要用户交互来播放音频（甚至从一首歌曲到下一首歌曲）的不同答案。所以这似乎行不通。但是其他答案似乎表明这是可能的。

是否有明确的“是”或“否”？我在这里做错了吗？还是根本不可能？

Answer 1

存在多个问题，导致一些混乱。

第一首曲目播放，第二首因用户权限未播放

如果第一个曲目是在用户许可下开始的，那么您可以通过脚本切换到新曲目的唯一方法是在 Apple 的推荐下。处理ended 事件并换入新的src，并在回调完成之前调用.play()。否则，您的代码将无权启动新音频。

由于时间限制源 (#t=5,10)，无法到达 ended 事件

假设您有一个 30 秒的音频文件，并通过 URL 末尾的 #t=5,10 之类的内容告诉浏览器仅加载 5 到 10 秒。当您到达10 时，将触发paused 事件，而不是ended。因此，无法正常进入下一个曲目，因为此事件并未被 Apple “祝福”为上一次用户交互的中继。

我通过让我的 JavaScript 反复检查 currentTime 来解决这个问题，当它超过一个阈值时，我自己将它查找到文件的 duration（结尾）。这允许ended 正常触发。

iOS 不允许在屏幕锁定或其他应用正在使用后运行脚本

这是一个真正需要调试的问题，因为它不会出现在任何模拟器中。无论如何，你是对的，你的 JavaScript 将被暂停，所以即使你遵循 Apple 的建议，你也不走运。或者，你呢？

A hack... 在 Web Audio 上下文中设置 ScriptProcessorNode。将缓冲区大小设置为 512 个样本或其他内容。然后，在脚本过程中，为您的音频元素强制一个 timeupdate 事件。这让你的 JavaScript 一直在滴答作响。 ScriptProcessorNode 本质上必须在这里拥有特殊权限。

Apple：如果您阅读此内容，请修复您的浏览器。如果我们不必为了制作像音频播放列表这样简单的东西来工作，那就太好了。其他浏览器几乎没有这种级别的问题。