播放声音从非活动的浏览器选项卡

Question

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

我看到一些网站(Facebook聊天，Cloudstats。我的服务器警报，…)播放声音，即使他们在非活动标签，那么这个问题的解决方案是什么?

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

通过移动资源加载发生在页面加载，然后只是调用音频。播放它修复了这个问题

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