У меня есть игра HTML5, в которой используются звуковые уведомления.
Когда пользователи ищут других игроков с совпадением, они часто меняют вкладки, чтобы делать другие вещи, и полагаются на звуковое уведомление, чтобы знать, когда вернуться. Это не работает после изменения Chrome (рабочего стола), чтобы запретить звуковые уведомления.
Как я могу гарантировать, что звуковые уведомления все еще работают в фоновом режиме?
Решение, которое сработало для меня, состояло в том, чтобы воспроизвести небольшой пустой звук (достаточно 0,1 секунды) после загрузки страницы. После этого, даже если вы перейдете на другую вкладку, вкладка в фоновом режиме будет по-прежнему воспроизводить звук на каком-то внешнем или внутреннем событии.
Вот пример, который создает div и использует тег HTML5 <audio> с отступлением к <embed>, который воспроизводит аудиофайл через 3 секунды после нажатия кнопки.
Чтобы протестировать его, запустите образец и нажмите кнопку, затем измените вкладки и отметьте 3 секунды. Вы должны увидеть значок динамика на этой вкладке и услышать звук падения монет через 3 секунды, даже если эта вкладка не является текущей вкладкой.
function playCoinDrop() {
soundDiv = document.createElement("div");
soundDiv.innerHTML = '<audio autoplay="autoplay"><source src="http://themushroomkingdom.net/sounds/wav/smw/smw_coin.wav" type="audio/wav" /><embed hidden="true" autostart="true" loop="false" src="http://themushroomkingdom.net/sounds/wav/smw/smw_coin.wav" /></audio>';
}<button onclick="setTimeout(playCoinDrop, 3000)">play sound</button>Здесь фоновые вкладки по-прежнему могут воспроизводить звуки из элементов <audio> (Chrome 49.0.2623.87). Однако, если Chrome заблокировал это, способ обойти его будет состоять в том, чтобы уведомить переднюю вкладку о событии и воспроизвести звук вместо закладки фона.
Следующее должно быть реализовано как расширение пользовательского словаря, чтобы он мог работать на любой вкладке - в качестве демонстрации он работает только между двумя вкладками с одним и тем же URL-адресом JSBin:
var intercom = Intercom.getInstance();
document.addEventListener("visibilitychange", getVisible);
function getVisible (evt) {
document.getElementById("fg-indicate").style.visibility = document.visibilityState;
if (document.visibilityState == "visible") {
// tab comes to front => listen to intercom
intercom.on('notice', play);
} else {
// kill callback
intercom.off('notice', play);
// call intercom with delay
window.setTimeout(function f() {
intercom.emit('notice', {message: 'Hello, all windows!'});
}, 3000);
}
}
function play() {
document.getElementsByTagName("audio")[0].play();
}
Он опирается на библиотеку intercom.js и использует localstorage для связи между открытыми вкладками.
Попробуйте это сделать
и т.д.
Код и немного больше кода для ввода элемента <audio> могут быть обернуты в пользовательский указатель, чтобы он мог запускаться на любом сайте, который находится впереди.