HTML5 Audio Tag and the iPad

January 13, 2011

On one of my sites, we use a flash slideshow that allows us to include an audio track to play during the slideshow. However, with the growing popularity of non-flash devices (read: iPad), we have to have a javascript slideshow to fall back on. The problem is that none of the available slideshows have audio track players included and our customers wanted their audio to play on the iPad as well.

Enter the HTML5 <audio> tag. This tag allows you to very easily add audio and play/pause controls to a page with one line:

<audio src="/great_background_music.mp3" controls loop autoplay></audio>

Great. Now when someone views a slideshow on a non-flash device, they'll have the same experience that they would have had with flash: background music while viewing their dream home on the lake. A fix that only took a few minutes. I checked my work in Safari's developer mode to simulate the iPad/iPhone and everything looked good.

Then I flipped on my iPad and waited for the background music to start. And...nothing. After double checking that I had written everything correctly I searched for answers online. Apparently, Apple doesn't want developers to be able to "autoplay" audio on the iPad because it would suck up too much bandwidth, so they disabled the feature. Well, anytime an authority disallows something, someone will find a way to do it anyway, so I kept searching.

There were two schools of thought on getting around this disability: First, write some javascript to simulate a user touching the play button; Second, write some javascript to insert the <audio> tag after the page has loaded. As of iOS 4.2.1, neither of them work.

Now this is where I struggle with some features on my sites. Do I continue to spend hours trying to find a loophole (what I really want to do) or reanalyze the situation and determine how this will affect my users (what I should and ultilmately do do)?

The accepted solution: add a custom play and pause button to the iPad version of the slideshow and allow the user to turn it on and off as they please. If a real estate agent (not our user, but the end customer of our service) wants to set up an iPad at an open house and have it play music, they can.