How to make audio autoplay on chrome

Solution #1

My solution here is to create an iframe

<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio"></iframe> 

and audio tag aswell for non-chrome browsers

<audio autoplay loop  id="playAudio">    <source src="audio/source.mp3"></audio>

and in my script

  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);  if (!isChrome){      $('#iframeAudio').remove()  }  else {      $('#playAudio').remove() // just to make sure that it will not have 2x audio in the background   }

Solution #2:

There is also another workaround for this according to @Leonard

Create an iframe that doesn't play anything just to trigger the autoplay in the first load.

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>

good source for the mp3 file silence.mp3

Then play your real audio file at ease.

<audio id="player" autoplay loop>    <source src="audio/source.mp3" type="audio/mp3"></audio>

Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.

Update August 2019

Solution #3

As an alternative we can use <embed>

For Firefox It seems that audio auto-play is working so we don't need the <embed> element because it will create double audio running.

// index.jslet audioPlaying = true,    backgroundAudio, browser;browser = navigator.userAgent.toLowerCase();$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');if (!browser.indexOf('firefox') > -1) {    $('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');    backgroundAudio = setInterval(function() {        $("#background-audio").remove();        $('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');    }, 120000); // 120000 is the duration of your audio which in this case 2 mins.}

Also if you have a toggle event for your audio make sure to remove the created <embed> element for audio.

Note: After your toggle, it will restart from the beginning because the <embed> is already deleted and the <audio> element will play as normal now.

$(".toggle-audio").on('click', function(event) {    audioPlaying = !audioPlaying;    $("#background-audio").remove();    clearInterval(backgroundAudio);    if (audioPlaying){        $(".audio1").play();        // play audio     }    else {        $(".audio1").pause();    }

And now make sure to hide these <audio> and <embed> elements

audio, embed {    position: absolute;    z-index: -9999;}

Note: diplay: none and visibility: hidden will make the <embed> element not work.

There is a really neat trick to use the autoplay-function of the audio tag in chrome.

Add

<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>

whereas silence.mp3 only is 0.5 seconds of silence.

This

<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>

works afterwards.

Chrome notices that a sound has been played and gives the permission for autoplay in audio tags.

As of April 2018, Chrome's autoplay policies changed:

"Chrome's autoplay policies are simple:

• Muted autoplay is always allowed.

Autoplay with sound is allowed if:

• User has interacted with the domain (click, tap, etc.).
• On desktop, the user's Media Engagement Index threshold has beencrossed, meaning the user has previously play video with sound.
• On mobile, the user has added the site to his or her home screen.

Also

• Top frames can delegate autoplay permission to their iframes to allowautoplay with sound."

Chrome's developer site has more information, including some programming examples, which can be found here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes