How to enable HTML audio and video autoplay with sound, in Chrome and other browsers, in 2019

Sad trombone update: this ‘hack’ has been ‘fixed’ by most – if not all – browsers now 🙁 

A visitor must interact with the site before audio can play. A click anywhere on the site is enough.

Chrome no longer allows audio autoplay and video autoplay with sound. I expect other browsers to follow suit in the near future.

I totally understand that video ads with sound that start playing out of nowhere are super annoying.  They are the reason for this policy change.

But, if you are a video content creator, a game developer, experience designer, or a sound designer creating your own page, this is actually really bad news.

I found a way to enable autoplay with sound again, with just a single line of HTML 🙂 And of course, I put it to good use on this site, here and here.

Check out this snippet:

<iframe src=”https://olafwempe.com/mp3/silence/silence.mp3″ type=”audio/mp3″ allow=”autoplay” id=”audio” style=”display:none”></iframe>
<audio autoplay>
<source src=”https://olafwempe.com/mp3/Septium.mp3″ type=”audio/mp3″>
</audio>

I’m adding an invisible iframe with an .mp3 as its source and allow=”autoplay” before the audio element. As a result, the browser is tricked into starting any subsequent audio file. Or autoplay a video that isn’t muted.

I’m using an .mp3-file that’s just a second of silence. It weighs in at 37kB – about the size of a thumbnail image. You can download that .mp3 here.