从 INACTIVE 浏览器选项卡播放声音答案

【问题标题】：Playing sound from INACTIVE browser tab从 INACTIVE 浏览器选项卡播放声音
【发布时间】：2023-08-30 20:41:02
【问题描述】：

我有一个餐厅控制面板，它会在下订单时发出警报声。问题是，当控制面板选项卡不是 Chrome 中的活动选项卡（Firefox 也是如此）时，不会播放警报声音。单击选项卡后，它会播放声音。

我看到一些网站（Facebook Chat、Cloudstats.me 服务器警报，...）即使它们处于非活动选项卡中也会播放声音，那么解决此问题的方法是什么？

【问题讨论】：

标签： javascript google-chrome audio browser

【解决方案1】：

我也遇到过类似的事情，我们试图在股市开盘和收盘时播放市场时钟。我们遇到的问题是我们尝试加载 mp3，然后在满足条件时播放。所以最初我有。

var bell;

// Update the clock, countdown, and tooltips as needed.
function updateClock() {
    service.getMarketDate(function(data) {

        if (data.soundMarketBell) {
            if (!bell) {
                bell = new Audio('/sounds/marketclock.mp3');
            }
            bell.play();
        }
    });
}

var intervalId = $interval(updateClock, 1000);

通过将资源加载移动到页面加载时发生，然后调用 Audio.play 它解决了问题

var bell = new Audio('/sounds/marketclock.mp3');

// Update the clock, countdown, and tooltips as needed.
function updateClock() {
    service.getMarketDate(function(data) {
        if (data.soundMarketBell) {
            bell.play();
        }
    });
}

// check for a time update every second
// to balance accuracy with performance
var intervalId = $interval(updateClock, 1000)

当标签页处于非活动状态时，浏览器会限制加载资源

【讨论】：

我很乐意看到某些文档：“浏览器在选项卡处于非活动状态时限制加载资源” span>
我不确定解释是否正确。下载 mp3 文件需要时间，所以第一次（至少）音频对象没有准备好导致“播放”失败。将这一行移到脚本顶部会在脚本加载后立即加载文件，以便文件可以播放。
可爱的解释 - 疯狂的东西

【解决方案2】：

由于浏览器的自动播放政策，音频也有可能无法播放。

例如，在 Chrome 中，除非用户主动点击网页，否则音频不会播放。

您可以在此处找到完整列表： https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

【讨论】：