从不活动的浏览器选项卡播放声音 [英] Playing sound from INACTIVE browser tab

问题描述

我有一个餐厅控制面板，在下订单时会播放警报声.问题在于，如果控制面板选项卡不是Chrome中的活动选项卡(对于Firefox也是如此)，则不会播放警报声音.单击选项卡后，它将播放声音.

I have a control panel for restaurants and it plays an alert sound when an order is given. The problem is that when the control panel tab is not the active tab in Chrome (it's also same for Firefox) the alert sound doesn't play. After clicking the tab it plays the sound.

我看到某些网站(Facebook聊天，Cloudstats.me服务器警报...)即使在非活动"选项卡中也能播放声音，那么该问题的解决方法是什么?

I see some sites (Facebook Chat, Cloudstats.me server alert, ...) play sound even if they are in inactive tab, so what is the workaround for this problem?

推荐答案

我也发生了类似的事情，当股市开市和停市时，我们正试图发挥一个Marketclock.我们遇到的问题是我们尝试加载mp3，然后在满足条件时播放它.所以原来我有.

Had a similar thing happen to me as well, we were trying to play a marketclock when the stock market opened and closed for the day. The issue we had was we tried to load the mp3 then play it when the condition is met. So originally I had.

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即可解决问题

By moving the resource loading to happen on page load and then just calling the Audio.play it fixed the issue

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)

选项卡处于非活动状态时，浏览器会限制加载资源

Browsers restrict loading resources when a tab is inactive

这篇关于从不活动的浏览器选项卡播放声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！