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

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

0 голосов
/ 19 сентября 2019

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

Ответы [ 2 ]

0 голосов
/ 19 сентября 2019

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

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

0 голосов
/ 19 сентября 2019

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

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

Чтобы быть в полной безопасности, вы вызовете метод 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>
...