Есть ли какой-нибудь обходной путь (или хак) для автоматического воспроизведения звука в Chrome, Firefox и Safari?

У меня есть анимационный проект, который должен автоматически воспроизводить звук во всех основных браузерах, в том числе на мобильных устройствах. Нам также нужно управлять звуком, чтобы он продолжал воспроизводиться после паузы и повторного воспроизведения. Это означает, что мы не можем использовать iframe, потому что звук будет воспроизводиться каждый раз. Кроме того, просто узнайте, что iframe теперь не может автоматически воспроизводиться в Chrome... Будет ли какой-нибудь обходной путь для решения этой проблемы?


person Nicole    schedule 19.09.2019    source источник
comment
make it continue playing after it paused - но он приостановлен   -  person Jaromanda X    schedule 19.09.2019
comment
извините, я имею в виду после того, как он снова сыграет. Я просто редактирую вопрос.   -  person Nicole    schedule 19.09.2019


Ответы (3)


Все эти браузеры требуют, чтобы ваш пользователь жестом подтвердил, что он действительно хочет, чтобы ваша страница воспроизводила звук.

Поэтому все, что вам нужно сделать, это пригласить своих пользователей сделать это жест пользователя.

Чтобы быть в полной безопасности, вы вызовете метод play() элемента MediaElement, которым вы хотите управлять, из этого события, инициируемого жестом пользователя (которое фактически требуется для Safari), и тогда вы получите полный контроль над этим элементом MediaElement:

// original samples from wikimedia
// https://en.wikipedia.org/wiki/Category:The_Beatles_audio_samples

const audio = new Audio("https://dl.dropboxusercontent.com/s/0eio842lwj1x5dj/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.mp3");
audio.repeat = true;
audio.volume = 0;

document.getElementById( 'btn' ).onclick = e => {
  document.getElementById( 'splash' ).remove();
  audio.play().then( () => {
    audio.currentTime = 0;
    audio.pause();
    audio.volume = 1;
    startTimers();
  });
};

function startTimers() {
  setTimeout( playAudio, 2000 );
  setTimeout( pauseAudio, 3000 );
  setTimeout( playAudio, 6000 );
  setTimeout( changeSrc, 7000 );
  setTimeout( pauseAudio, 15000 );
  setTimeout( playAudio, 60000 );
  setTimeout( pauseAudio, 70000 );
}
function playAudio() {
  console.log('playing');
  audio.play();
}
function pauseAudio() {
  console.log('pausing');
  audio.pause();
}
function changeSrc() {
  console.log('changing src');
  audio.src = "https://dl.dropboxusercontent.com/s/okbnk1ycupxrrb2/_Sgt._Pepper%27s_Lonely_Hearts_Club_Band_by_the_Beatles_1967%20%281%29%20%28online-audio-converter.com%29.mp3";
  audio.play();
}
#splash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#splash p { display: inline-block }
<div id="splash">
  <button id="btn"><h1>Start the awesome</h1></button>
</div>

person Kaiido    schedule 19.09.2019
comment
Да, я знаю, что нам нужно заставить пользователя активировать звук, чтобы он воспроизводился. Но можно ли пропустить триггер и сделать автозапуск звука? - person Nicole; 19.09.2019
comment
@Николь, нет, тебе это нужно хотя бы раз (но только один раз) - person Kaiido; 19.09.2019
comment
@Kaiido Так как же это делает эта веб-страница: trump.tv/video/2GlqpgCRIYg - person SirLemuel; 09.01.2021
comment
@SirLemuel для меня там ничего не воспроизводится автоматически. Может быть, вы разрешили YT автоматически воспроизводить видео в настройках браузера? - person Kaiido; 09.01.2021
comment
@Кайидо Вау. Спасибо за быстрый ответ. Я точно не уверен, но он воспроизводится автоматически, что я впервые вижу. Если это не сработает для вас, мне придется устранять неполадки дальше, но я просто случайно решил посмотреть, существует ли Trump.tv, и он перенаправил на эту страницу и мгновенно воспроизвел видео. - person SirLemuel; 09.01.2021
comment
Похоже, у меня это работает только в Chrome, но не в Safari. - person SirLemuel; 09.01.2021
comment
Вероятно, они сохранили ваше взаимодействие со страницей, которая перенаправила вас туда. Можете ли вы попробовать ввести адрес в адресной строке новой вкладки? - person Kaiido; 09.01.2021

В браузерах больше нет автовоспроизведения звука. Я рекомендую прочитать эти.:

статья Google об изменении политики автозапуска
Руководство MDN по автозапуску
Политика автоматического воспроизведения веб-приложений

Есть много полезной информации, почему это работает так, как сейчас, и что с этим делать.

person Kuu_Tamo    schedule 19.09.2019

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

Что вы можете сделать, так это то, что когда пользователь открывает страницу, он должен сначала щелкнуть где-нибудь или какую-то кнопку, чтобы сделать фактический контент видимым, а затем с этим воспроизвести звук после взаимодействия с кликом.

Информацию об устранении ошибки см. в разделе Расширение элемента DOM, обработка ошибки и изящная деградация.

PS: я заметил, что при переключении вкладки перезагрузите вкладку, на которую вы переключились, и переключитесь обратно + перезагрузите, она просто работает без каких-либо обходных путей. Не решение, мне просто интересно, почему это происходит (я использую последнюю версию Chrome). Он должен инициировать взаимодействие с документом, ничего не делая

person Taki7o7    schedule 22.03.2020