Question

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

我看到一些网站（Facebook Chat，Cloudstats.me服务器警报，......）即使在非活动标签中也会播放声音，那么这个问题的解决方法是什么？

Answer 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)

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

Answer 2

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

例如，在Chrome中，只有在用户主动点击网页后，音频才会播放。

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

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

2 个答案: