The State of HTML5 Audio

When I started to work on my JavaScript Game Engine back in October 2009, the biggest problems I encountered were with the new HTML5 Audio Element. The Canvas Element already worked nicely in all browsers that supported it at the time, albeit some were a little slow.

Now, in 2011, the rendering performance for Canvas has been improved dramatically, audio however is still broken in large parts. I think it is time for a change in tone. Be warned, there's some profanity ahead because HTML5 Audio is still that fucked up.

Before we start, you may want to play a quick round of Biolab Disaster or Z-Type and have a look at a simple test case to experience the sound issues first hand.

Browsers From Companies That Actually Care About HTML5 Audio:

Firefox 4, Beta 13pre

Almost perfect Audio support with occasional clicks & pops when playing many sounds. Notably, Firefox 4 also features the Audio Data API for generating and modifying sounds on the fly – which I think is brilliant and desperately needed to compete with Flash.

Note that the current Beta 12 still has some larger timing issues, but this seems to be fixed in the Beta 13 nightly build.

Opera 11

Good Audio support overall. Some clicks & pops and minor timing issues. Works nicely for games but still needs improvement.

Chrome 11

Severe problems with short sound clips, timing issues, clicks & pops, goes completely silent after a few seconds. Pretty much useless for games at the moment.

(Come on guys, you've done some amazing things in the past, I'm sure you could get HTML5 Audio right if you just tried!)

Update: As mentioned on Twitter and in the comments, Chrome also has an Audio Data API that is somewhat similar to the one in Firefox 4.

Browsers From Companies That Hate the Web Enough to Not Support Ogg/Vorbis, but do Have an <Audio> Tag So They Can Say They Have an <Audio> Tag (Seriously, Fuck You):

(Wohoo, big surprise, it's Apple and Microsoft! Who would've thought?)

Safari 5

Some clicks and pops, lag for short sound files. Doesn't support Ogg/Vorbis, but instead favors MP3 – a patent encumbered codec with a far worse quality to size ratio that was never meant for short sound clips and introduces a leading and trailing silence. Ride on.

Internet Explorer 9

Doesn't play audio in my test case at all. Sure, I could adjust my test case so that it would work, by doing something like this:

if (IE) { 
    doTheStupidThingThatWorksInIE(); 
} 
else { 
    doTheThingThatWorksInAllOtherBrowsers(); 
}

But quite frankly, I don't give a shit anymore about this stupid piece of crap that Microsoft calls a Browser and throws out a release for every 3 years, just in time to not let it fade out completely but annoy web developers for more years to come. IE9 is not even out yet and already 2-3 years behind of every other major browser.

Internet Explorer, you would do us all a huge favor if you would just die a silent death. Please go away. Nobody likes you.

Browsers That Say They Support HTML5 Audio But Actually Don't Support HTML5 Audio:

Android Browser

Understands the <Audio> element, but can't play sounds at all, because it has no codecs. Not even Wave. Utterly useless for anything.

Mobile Safari

Can't pre-load sound files, only plays one sound at a time, severe lag, timing issues, clicks & pops, completely ignores every other call to play a sound, doesn't support Ogg/Vorbis. Utterly useless for anything. Oh, and did I mention it doesn't support Ogg/Vorbis?

Final Thoughts

Surprisingly, Google's Chrome has the worst HTML5 Audio support of all the good Desktop Browsers - that is every Browser but IE. I'm not an audio engineer, but before Browser vendors took their shot at it, my impression of digital audio was that it is a solved problem. I'm amazed that after so many iterations HTML5 Audio is still that broken.

The Audio support on mobile Browsers (iOS and Android) is laughable at best. It's completely unusable for even the simplest of tasks. You can jump through hoops and ask real nice, but it still sucks ass.

I've heard some arguments that it is crippled on purpose, because you don't want a website to start blaring music at you as soon as you open it. Fine, I understand that argument. But why not ask the user for permission to play audio and then do it right? It's already been done with Geo Location and Storage.

And as for Vorbis support, Adobe should send some flowers to Microsoft and Apple for being in the same douchebag company league as they are. By trying to make things as complicated as possible they ensure that the easiest way to have audio in all Browsers is still Flash. Good job.

But seriously, I really don't understand why they can't support Ogg/Vorbis. This is not the same discussion as with HTML5 Video, mind you. Quality wise there is no question that Vorbis is better than MP3; there are no patent issues with Vorbis like there are with WebM and I even fail to see any "company politics" reason for not supporting it.

“Mimimi, there are no hardware decoders for Vorbis” you say? Fuck you. The first gen iPod touch can decode Vorbis in software while running Wolfenstein 3D with 60fps.

To conclude this rant, let me say that I'm a bit angry at myself for giving Internet Explorer that much screen time again, when instead we should all stop caring about that piece of shit.