The state of HTML 5 audio support
Every year since 2007, I’ve created a compilation of my favourite tracks first heard that year and shared them with friends. Last year I made a mini-site built around an invisible, javascript-controlled Flash player, and for this years collection I decided to experiment with HTML 5′s new audio features.
You can find my best of 2009 collection here. Twelve of the tracks include audio commentary (click the “Why?” button in the top left). I learned quite a lot doing this and I want to share that.
Supported browsers
The site works in Firefox, Chrome and desktop Safari; these are the major browsers that support HTML 5 audio at the moment. Due to their support of CSS animations and the HTML 5 range input, I recommend using Chrome or Safari to check it out; they get the added bonus of a master volume control in the bottom-right corner of the page.
The site navigation works fine in mobile Safari but music doesn’t play. Unfortunately mobile Safari doesn’t support HTML 5 audio, which is a shame. I’m hoping this will be something they’ll fix in time for the iPad launch.
That’s a small fraction of the market
It doesn’t work in Internet Explorer, which would be a problem for a lot of sites, but although I wouldn’t suggest going solely with HTML 5 audio for the mass-market at this time, it’s definitely worth investigating. There’s a good chance that HTML 5 audio represents a part of the future direction of the web, and if that’s the case it’s likely IE will pick up these feature eventually.
The site as it stands doesn’t support a Flash fallback for two reasons. The first is that adding the Flash fallback would have made the code messier. The second, more important reason is that it would have been absolutely no fun.
Pain points and gotchas
As usual, what I thought would be difficult was not as hard as what should have been easy. There’s plenty of gotchas when it comes to HTML 5 audio.
- Rapidly queueing new audio in your browser can cause it to crash. Hitting the play button, and then advancing rapidly to subsequent tracks, can take out your browser.
- To support Firefox, Safari and Chrome, I was required to encode and upload two sets of audio files: one in MP3, the other in OGG format. Though I appreciate the position the Firefox team is taking regarding the patent issue, uploading 200 megs of files on a home DSL connection is a right pain in the bum.
- By default Amazon S3 serves .ogg files as “application/x-ogg”, which Firefox refuses to play. Getting S3-served .ogg files to work in Firefox required going in and changing each individual content-type to “audio/ogg”.
- Creating new Audio objects isn’t a great idea, at least in this case. Twenty of them will kill Chrome so bad you need to quit the browser. The best way to add audio dynamically in HTML 5 seems to be adding <audio> elements to the DOM.
- Some browsers seem to throw the “ended” event too early. Overall, there appears to be a bit of a lag between what the browser thinks is going on and what is actually happening. Firefox appears to be the worst offender: songs continue playing for a few seconds after you close the tab.
- Google Chrome, at least the version on my Mac, doesn’t support variable bit-rate MP3s very well. Chrome will happily report VBR MP3s as finished seeking and tell you that the playhead is at the start of the file, but when you attempt to play it you’ll hear what appears to be the sound going in reverse.
- The “canplaythrough” event seems to be thrown a bit optimistically.
Overall impressions
HTML 5 audio support is nice but unfortunately it’s still pretty buggy across browsers that support it. It’s probably fine for smaller audio needs (like sound effects in a web app) but multitrack playback with multi-megabyte files seems a bit flaky at present.
It’s also a shame you can’t do a lot with the audio itself, other than change the volume. You can do some pretty cool stuff with HTML 5 video but unfortunately things like audio filters, graphic equalisation or any sound visualisation are impossible as far as I can tell in the official versions of these browsers (unofficial builds are a different matter).
Typefaces
“By” is set in Bickham Script Pro, but everything else is in Alte Haas Grotesk, a font I’ve been dying for an excuse to use. It’s free, too.