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