如果音频正在另一个选项卡或窗口中播放，如何关闭声音

Posted 2023-03-08

【中文标题】如果音频正在另一个选项卡或窗口中播放，如何关闭声音

【英文标题】：How to turn off sound if audio is playing in another tab or window

【发布时间】：2012-11-14 23:29:56

【问题描述】：

我完全意识到在网站上播放背景音乐是​​一个可怕的想法。但是，我的客户坚持这样做。我们遇到了各种各样的麻烦。首先，我们必须找到一个脚本让歌曲“跟随”浏览器（对于那些正在寻找这种东西的人来说，它被称为“html5 背景音频播放器”），记住歌曲在页面加载之间被切断的位置。

但是，我们现在遇到了一个新问题。如果网站一次在多个选项卡或窗口中打开，则音乐会自动播放。

我也完全清楚，如果您决定在新选项卡或窗口中打开站点中的另一个页面，简单的解决方案就是手动静音。我讨论过这个。然而，我的客户是一个非常“特殊”的人，他坚持认为计算机“应该知道我何时打开新页面”。

我的问题是：这样的事情存在吗？我不知道这将如何在 javascript 中完成。

【问题讨论】：

你的客户是不是这样的人：theoatmeal.com/comics/design_hell？

【参考方案1】：

您应该使用 cookie 或/和 HTML5 会话存储来记录您的游戏已经开始。 然后，如果有，您不会在后续页面加载时启动它。

【参考方案2】：

如果您正在谈论动态打开一个新选项卡，通过单击链接并让该单击调用 window.open();，然后 .open() 返回对子窗口的引用，然后您可以在父脚本中与之通信：var childWindow = window.open(url);

否则，cookie？ 查询字符串中的会话参数，如果打开新选项卡，您可以更改它。

如果您只使用 html5-audio，另一个建议是使用 localStorage。 大多数支持 HTML5 的浏览器window.Audio; 也支持window.localStorage;。 您必须明确检查是否确实支持和启用了 localStorage，但这只是良好的公民身份。

然后您应该能够为选项卡设置一个随机 ID，将该 ID 保存在 session-storage 中，将“is_playing”或 localStorage 中的任何字段设置为您在 sessionStorage 中为选项卡提供的 ID...

...然后在每个新选项卡上，检查 localStorage 中的“is_playing”是否为空，或者 ID 是否等于 sessionStorage 中设置的 ID。

localStorage 和 sessionStorage 的区别在于 sessionStorage 是在你关闭浏览器后清空的，而且它也不应该在标签之间共享。

【讨论】：

你确实很厉害。我不知道如何使用 cookie，但我会阅读它，看看是否可以实现。