August 9, 2010 by

How to get hidden, autoplaying audio in html5 on iOS

Let me start this with a warning: If you’re making a website and you think autoplaying audio in the background is a great idea, you’re wrong. Very, very wrong.

Autoplaying audio, especially hidden autoplaying audio, is a terrible idea. Users hate it. It’s even more a terrible idea if you’re aiming your website at iPhone users, because most of them are on a data plan and they don’t want to pay large amounts of money to visit your site. It’s an awful thing to do and you should never do it.

That said, here’s how you do it.

Some html first

First, of course, you’ll need to add the audio tag in your html.

  
<div id="hideme">
	<audio id="audioTag" controls>
        	<source src="/path/to/audio.mp3">
	</audio>
</div>

This is a fairly standard audio tag. Simple stuff, really.

A sprinkle of Javascript

Next, the javascript. I was expecting this to be much, much more difficult than it was. Apple even say it themselves, in the Safari documentation, that it’s not possible to have autoplaying audio on iOS. They clearly missed something then:

window.onload = function() {
    		var audioEl = document.getElementById("audioTag");
    	
    		audioEl.load();
    		audioEl.play();
    	};

Simple, right? In fact, so simple that I’d expect it to stop working at any moment. Right now, though, it does work, for iOS4 on iPhone and whatever it is the iPad runs.

So now you have autoplaying audio, but you’ve still got those pesky controls onscreen. Easily fixed. A little bit of CSS will fix that for you.

Some CSS for flavour

This, again, is so simple that even I could do it. Simply hide the div that contains the audio tag with css, like so:

#hideme {display: none;}

And that’s it! Now your audio will hide and autoplay for every iOS user who visits your site.

And here’s one I made earlier

Want to just see it in action? Here’s the code.

Let me reinforce, though: if you do this without warning, nobody will visit your site and your dog will run away. The only reason I’ve done this is because we need it for the Flax Engine (and we will, of course, warn our users). Unless you’ve got a similar excuse, just don’t do this.

Thanks to @gabrielvisser and @jearle for sacrificing their iPhones to ruthless testing.

About the Author

Carl Lange

I'm currently a Computer Games Development student at Carlow IT. I love programming and all things technical, and I'll learn anything if it's interesting. I'm passionate about technical education, and naturally about games. Check out my resume, and follow me on Twitter!

Visit Website

6 Comments

  1. Hay June 20, 2011

    This might have worked on previous versions of iOS, but i can’t reproduce it on iOS 4.3.3.

  2. r000t April 23, 2012

    I use autoplaying ogg files on a certain 403 page mod_security returns if a user is acting suspiciously. I believe that is a perfectly good reason to use autoplaying music.

  3. demotivator May 3, 2012

    Why using controls attirbute and then hide audio element using CSS?
    instead of simply not using controls attribute?

    works fine for me đŸ˜›

Trackbacks for this post

  1. Flax Project New HQ | Flax Project says:
    August 11, 2010 at 10:22 am

    […] with the HTML5 audio tag in different browsers and platforms as can be seen by his recent article How to get hidden, autoplaying audio in html5 on iOS. Myself, I’m working on the graphics layer using Canvas and looking into using the DOM due to […]

  2. How to get hidden, autoplaying audio in html5 on iOS | Flax Project says:
    April 12, 2011 at 4:48 pm

    […] HTML5 audio on iOS (now with added hackiness!)Let me start this article the same way I started my previous article about this topic: don’t autoplay audio. Autoplaying audio is the worst thing on the web and nobody will visit […]