Воспроизведение звука из вкладки НЕАКТИВНЫЙ браузер

Question

У меня есть панель управления для ресторанов, и она воспроизводит звуковой сигнал при заказе. Проблема в том, что когда вкладка панели управления не является активной вкладкой в ​​Chrome (это также относится и к Firefox), звуковой сигнал не воспроизводится. После нажатия на вкладку воспроизводится звук.

Я вижу, что некоторые сайты (чат Facebook, оповещение сервера 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