This blog has been archived. Our writing has moved to makandra cards.
The blog of , a Ruby on Rails development team

HTML5 audio is a ghetto

I recently had the opportunity to create a Who Wants To Be A Millionaire game with all the sounds and whistles from the original TV show. It was for the purpose of a birthday party, and grilling your buddy with questions from their teenage life in front of a huge crowd is one of the funnest activities you can have legally.

I had already started to lay out the game UI in Flash, when I remembered all the fancy new HTML 5 features I normally can't use because of any browser that is not Webkit. In this case however I had 100% control over which browser was going to be used (Chrome!). So I closed Flash and wrote the whole thing using HTML, CSS and Javascript. I had a lot of fun doing this (CSS3 is awesome!), but found HTML5's new support for audio to be severely lacking.

Modern browsers can load an MP3 or OGG for playback by using either an <audio src="http://url"> tag or instantiating a new Audio('http://url') in Javascript. Unfortunately there's no good place to find out which methods you can call on an Audio object. Right now the best source for information on HTML 5 audio is a couple of blog posts. This we can improve on, and I believe that the W3C style of documentation needs to go. Note that this is coming from a Ruby developer, and Ruby people couldn't document their way out of a paper bag.

You have no real control over when an audio file starts to load. When you create a new <audio> element? When you set the src on that element? When you append that element to the document tree? No one will tell you. Maybe no one knows.

For consistency, there's also no way to tell if a file has finished loading. There are three gazillion callbacks and not one will tell you when you can absolutely, positively play a sound.

The next few annoyances have more to do with Chrome's implementation than HTML5, but seeing that HTML5 is basically powered by Webkit right now, it matters.

When you move the playback position of an audio file, it produces a nasty popping sound in your speakers. From my limited understanding of audio engineering, this happens when you disrupt the sound wave at a point that is not a zero crossing. In Chrome this occurs regardless of whether the sound is playing or paused when the playhead is moved. This is super-annoying, especially since the only way to play a sample from the beginning is to pause it, set the position to zero, and hit play again. I only had to play a sample every few seconds for my quiz, but maybe you'd like to rethink using HTML5 audio for your upcoming Javascript shooter game.

Maybe the most annoying problem was that Chrome randomly refused to load some of the 40 sounds I was using for my game. It would give no error, the Audio object would simply play dead when attempting to play the sound. This happened undeterministically every 5th page load or so (and of course it happened during the performance ☺).

HTML5 is awesome, but I'll stick with Flash for audio for now.

Growing Rails Applications in Practice
Check out our e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Recent posts

Our address:
makandra GmbH
Werner-von-Siemens-Str. 6
86159 Augsburg
Germany
Contact us:
+49 821 58866 180
info@makandra.de
Commercial register court:
Augsburg Municipal Court
Register number:
HRB 24202
Sales tax identification number:
DE243555898
Chief executive officers:
Henning Koch
Thomas Eisenbarth