Is there any workaround (or hack) to make the audio autoplay on Chrome, Firefox and Safari?

Question

I have an animation project that needs to autoplay the audio on all main browsers includes those on mobiles. We also need to control the audio to make it continue playing after it paused and played again. That means we can't use iframe because it will replay the audio everytime. Plus, just find out that iframe can't autoplay in Chrome now... Will there be any workaround to fix this problem?

Answer 1

What all these browsers ask is that your user provide a gesture to confirm they actually want your page to produce sound.

So all you need to do is to invite your users to make this user-gesture.

To be completely safe, you'll call the play() method of the MediaElement you wish to control from this user-gesture triggered event (that is actually required by Safari), and then you'll have full control over this 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>

Answer 2

There's no more autoplaing audio on browsers. I recommend reading these.:

Google's article Autoplay policy chghanges
MDN's Autoplay guide
Webkits autoplay policy

There's a lot of good information, why it works as it does nowadays and what to do for it.

Answer 3

When you attempt to autoplay audio without the user interacting with the document first, it will throw an error. So the key is to get the user interact with the document first.

What you can do is, when user opens the page, he must first click somewhere or some button to make the actual content visible and then with that play the audio after the click interaction.

For catching the error see Extend the DOM Element, Handle the Error, and Degrade Gracefully.

PS: I noticed when switching tab, reload the tab you switched to and switch back+reload it just works without any workaround. Not a solution, i just wonder why this happens (i am using latest Chrome). It must trigger document interaction without doing anything