HTML5 <audio> 中断移动音乐（Spotify，...）

Posted 2023-02-25

【中文标题】HTML5 <audio> 中断移动音乐（Spotify，...）

【英文标题】：HTML5 <audio> interrupts mobile music (Spotify,...)

【发布时间】：2018-05-14 15:51:35

【问题描述】：

我正在开发一个网站，该网站的目标网页显示海滩海浪的视频。然后客户希望我实现与该屏幕相关的音频（一些海洋声音）。

---

在回家听音乐的路上，我通过移动设备查看了该网站。一切都很好，但我正在听的音乐（来自 Spotify，但我想这与其他音乐应用程序的行为相同）停止了。 我咨询了谷歌，但没有找到解决方案。有没有办法防止这种情况？

【问题讨论】：

您找到解决方案了吗？

@KingRidgehead 不，抱歉：/

能否提供网站链接？这样我就可以在我的手机上试用并查看。我也有 iPhone 和 android。

【参考方案1】：

您的音乐正在通过您手机中的应用播放。但是当你打开手机浏览器，然后转到首页有视频和声音的网站。浏览器试图运行带有音乐的视频。这就是为什么您正在播放音乐的后台应用程序被中断，因为浏览器也在尝试处理相同的音频 api。

同样的事情发生在我的安卓手机上。但是最近的 chrome 更新已经解决了这个问题。但是mozila和其他浏览器是不启用背景音乐的。

我对iphone一无所知。

【讨论】：

感谢您的回答。我知道是浏览器播放网站的声音导致后台应用程序的音乐中断。我正在寻找一种在不停止背景音乐的情况下仍然在网站上播放音效的方法。 ? …也许这在大多数浏览器中是不可能的，只能在少数情况下完成，比如你提到的 Android 上最近的 Chrome 更新。 ? 我希望不是——我想要一个更通用的解决方案！

@GeorgeWS 你刚刚回答了你自己的问题 - 我不确定现在所有浏览器都有可能：/

【参考方案2】：

这完全有道理。我不知道你为什么要同时播放两种声音。我猜那会是噪音。我认为您没有问题，实际上最好是网站音频暂停您设备上的其他音频实例。

【参考方案3】：

我已经通过这个网站检查了我的 iPhone，其中包含音频。

https://guccidive.gucci.com/

并且还在 Spotify 和 Gaana App 中播放歌曲。但两种声音同时播放。我有 iPhone 6s，使用 Safari 浏览器查看。

正如无限克拉弗所说，正确的只是一次只播放一种声音。因为如果您同时听到 2 个声音，它将成为用户的噪音。我敢打赌，用户根本不会喜欢它。因此，当用户浏览您的网站时，暂停所有其他背景声音是完美的选择。

您对此无能为力。因为这是由浏览器应用程序本身处理的。到目前为止，我们的网站无法按照您想要的方式工作。

【参考方案4】：

例如，虽然 Windows 10 允许这种情况发生（有两个 youtube 选项卡运行有声音，另一个应用程序提供单独的音频），但我真的怀疑这在手机上是否是一个好主意，你基本上只能在手机上打开一个应用程序随时。

Apple 似乎允许这种情况发生，但这取决于应用程序本身，因此除了您自己的应用程序 AFAICT 之外，您无法更改任何内容。