Playing sound from INACTIVE browser tab

问题

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.

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?

回答1:

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

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

回答2:

There's also the possibility that the audio wouldn't play because of browsers Autoplay policy.

For example, in Chrome the audio won't play until the user actively click the web page.

you may find the full list here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

来源：https://stackoverflow.com/questions/33196475/playing-sound-from-inactive-browser-tab

标签

javascript

google-chrome

audio

browser