Web Audio for the iPhone

I’ve had a few comments requesting more information about how Grabb.it’s iPhone music player works, and more generally, how to manage web audio on the iPhone. This post will just be a short review of what I’ve learned in the last few months. I’ve written it with a technical audience in mind, but I’ll keep to plain language because if you are writing an iPhone audio application I’d suggest you research the various ways of using an embed tag yourself, rather than just cargo-culting from me.

Sorry, no Javascript

Web audio (mp3 and aac files) on the iPhone is played via Quicktime. On the desktop, Apple provides a rich and useful Javascript API to the Quicktime plugin, allowing you to create custom controls and behaviors. On the iPhone we do not have that luxury. If anyone at Apple is listening, what I want for Christmas is your Quicktime Javascript API in Mobile Safari. With that I’d have no need to write an iPhone “native” application. To see an example of what can be accomplished using Quicktime in a real browser, check out the Make it Play bookmarklet.

In a Nutshell

Back in the real world, on the iPhone you’ll have much less control over your content. The experience is optimized for video, and the degree to which audio works seems like an afterthought. There is no Javascript API for audio playback on the iPhone. Here’s a secret: you can get 90% of the available functionality by doing 1% of the work. The simplest, most reliable way to include music on a web-page is to just plain link to the mp3.

Direct links to the mp3 have the advantage that other platforms and services can interact with the music without you having to do any work. Even people on crappy old slow computers can still click and download the file to their iPod or what-have-you. “But wait,” you say, “I don’t want people to just have my files.” My reply: Get. Over. It. If you want people to ever care about your band just give them the mp3 already. Unless you’re already backed by Columbia Records or something, being stingy with your files is a recipe for languishing in obscurity. End rant.

Remember, direct links to the mp3 are almost as good as you can get for the iPhone, and quite frankly, I think the additional work it takes to get incrementally slicker audio integration is not worth it. Not only will it make your site a little less compatible with other browsers, it’s just disappointing how little leeway Apple gives you to innovate.

The biggest drawback to plain links to mp3 files on the iPhone is that they open in a new browser window, so when the song finishes playback, your users are presented with a blank screen, instead of your beautiful website. To get back to your site they’ll either have to use the back button or close the current browser “tab”. If you’re not down with that, the next section in for you.

Getting Fancy

Be forewarned, even the current state of the art for iPhone media playback monopolizes the entire Safari application. That’s right, when users are listening to music they cannot browse other websites. Safari becomes entirely dedicated to full-screen playback of your audio file. Users can, however, go read email or check the weather. I think this is a legacy of Apple’s focus on web video over audio. I’ll suggest that enabling web-based iTunes competitors might not be their top priority.

Another caveat: long mp3s (like podcasts) tend to stop randomly in the middle, no matter how you link to them. Apple wants people to go through iTunes for those.

When users launch mp3 playback via Embed tags, the music loads directly without opening a new browser window. This means when the song finishes, they’ll be taken back to your site. Apple has decent documentation about composing Embed tags for Quicktime. The code Grabb.it uses looks like this:

<embed target="myself" type="audio/mpeg" loop="true" src="/images/load.gif" href="http://grabb.it/tracks/ed925565ab61-tomtastic-2del-icio-us.mp3"></embed> Here it is in practice:

The important attribute here is “target” – setting it to “myself” is what keeps Mobile Safari from opening another page. The “src” attribute is pointed to a loading image – this is the equivalent of a thumbnail for a movie.

Hold your Horses

You may think you are ready to go, and now you’re gonna go deck out your band’s page with a bunch of Embed tags. Not so fast. The iPhone loads each mp3 file referenced by href as soon as it sees the embed tag. You can check this by trying an embed tag pointed at a dummy (404) URL. The play button which normally appears will not show up, which is how we know the iPhone is going over the network for each Embed tag. This is OK for maybe 1 or 2 mp3s on a page, but any more and you’ll run into trouble.

A page with 10 or 20 embed tags will probably crash Mobile Safari, or at least make everything else unbearably slow. The remedy for this is to write the embed tags on demand using innerHTML. It’s beyond the scope of this article to show you how, but if you are new to Javascript, learning how to do a little DHTML certainly won’t hurt you. The end result is that the user has to click once to create the Embed tag, and again to make it play.

That’s it

Hopefully this article will save you the time it spent me to figure this stuff out. Enjoy.

If anyone out there has any sway at Apple, I’ll buy you a beer if you get them to include the full Javascript API for Quicktime on the iPhone. I’ll also release a sweet beat-matching mobile DJ mixer. No kidding.