javascript - 是否有任何变通办法(或黑客手段)使音频在Chrome，Firefox和Safari上自动播放？

Question

我有一个动画项目，需要在所有主要浏览器(包括手机上的浏览器)上自动播放音频。我们还需要控制音频，以使其在暂停并再次播放后继续播放。这意味着我们不能使用iframe，因为它会每次重播音频。另外，只需确定iframe现在无法在Chrome中自动播放...是否有任何解决方法可解决此问题？

Answer 1

所有这些浏览器都要求您的用户提供一个手势，以确认他们实际上希望您的页面产生声音。

因此，您需要做的就是邀请您的用户制作user-gesture。

为了完全安全，您将通过此用户手势触发的事件(Safari实际需要)调用要控制的MediaElement的play()方法，然后您将完全控制此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>