Автовоспроизведение звука на вкладке хромового фона

У меня есть игра HTML5, в которой используются звуковые уведомления.

Когда пользователи ищут других игроков с совпадением, они часто меняют вкладки, чтобы делать другие вещи, и полагаются на звуковое уведомление, чтобы знать, когда вернуться. Это не работает после изменения Chrome (рабочего стола), чтобы запретить звуковые уведомления.

Как я могу гарантировать, что звуковые уведомления все еще работают в фоновом режиме?

Ответы

Ответ 1

Решение, которое сработало для меня, состояло в том, чтобы воспроизвести небольшой пустой звук (достаточно 0,1 секунды) после загрузки страницы. После этого, даже если вы перейдете на другую вкладку, вкладка в фоновом режиме будет по-прежнему воспроизводить звук на каком-то внешнем или внутреннем событии.

Ответ 2

Пример 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>

Ответ 3

Здесь фоновые вкладки по-прежнему могут воспроизводить звуки из элементов <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 для связи между открытыми вкладками.

Попробуйте это сделать

  • открытие https://jsbin.com/gerihijofe/1/edit?html,js,output на одной вкладке
  • затем на другой вкладке
  • вкладки переключателей
  • подождите 3 секунды, посмотрите, где появляется значок маленького динамика.
  • вкладки переключателей
  • подождите 3 секунды, посмотрите, где появляется значок маленького динамика.

и т.д.

Код и немного больше кода для ввода элемента <audio> могут быть обернуты в пользовательский указатель, чтобы он мог запускаться на любом сайте, который находится впереди.