Is HTML5 Ready for Prime Time? (Part II)

In Part I, game developers Raymond Jacobs and Tom Novelli take a look at HTML5's capabilities and dispel common misconceptions about JavaScript.  In Part II, they propose a solution to HTML5's nightmarish audio problems.

Audio

So I’m gonna come right out and say it, audio in HTML5 sucks. There is no reason to dance around the issue. Before I go any further, let me assure you, you can get a decent audio experience in HTML5, but here are some issues you’ll face:

• Audio format issues: 

Certain browsers can only play certain audio formats, this means you will have to deploy at least two audio formats (currently .mp3 and .ogg). Blame software patents.

• Bad Information: 

There is an API to ask a browser what kind of audio formats it can play; sadly this API is horrible with such decoder support responses as “maybe”. Across the myriad of browsers, we’ve also found the API to outright lie about what it can and can't support.

• Cruddy Implementations: 

Some browsers, even though they swear they can play a format; their decoder/stream implementations are just broken. High start latencies, bad audio quality, incorrect timing. Some browsers (or operating systems) seem to implement the bare minimum just so they can say they support a format.

• High start latency: 

If you load a sound file via http and hit play, by the time the sound has downloaded the moment has passed. This is okay for background music, but it's unacceptable for sound effects action games.

This all sounds really hard!

Audio is the #1 problem with HTML5 today; thankfully a lot of smart people have come together, and technology is emerging that makes HTML5 audio at least functional, if not feature-rich.

Audio Sprites to the rescue!

Just as the Atlas is a 2D packing solution for images, to reduce loads of http calls and nominal overhead; the Audio Sprite is a 1D solution for sounds. We took our lead from the ground work done by Remy Sharp. The basic idea is that you pack your sound effects into a single audio file, with a half-second of padding (silence) between each sound to allow for timing irregularities. An accompanying .json file lists all of the files contained in the audio sprite, and their start and end positions.

With audio sprites, you only need to convert one file to ogg and mp3, and you only need one http request to download it.

• Latency b-gone! 

The main benefit of having one large sound file is that we avoid streaming issues with small audio files. The browser preloads the single audio file, then seeks to the beginning of each sound effect when called for, with minimal latency. Our only issue is that we need to monitor and stop the stream after the sound ends but before the next one begins.

• “What about bad format detection?” 

This is still somewhat of an issue; we’ve found that you can favor MP3 and get coverage on most browsers; but at the time of writing it would not be a bad idea to include an MP3-or-OGG setting in your options menu. Also, make sure you're doing it right; a lot of people cut corners in format detection.

• “This all sounds like a bit much to handle!” 

Yeah it’s a pain; it took us weeks to develop the necessary tools and tricks. If you’ve got a project in the works and need some help, drop us a line at this e-mail.

By the way, there is hope. Most web browsers already support the new Opus format and/or the spiffy new OpenAL-based WebAudio API. It's probably just a matter of time before they all do.

Raymond Jacobs is the driving force behind Ethereal Darkness Interactive (EDIGames), a western Massachusetts indie developer focused on the Action/RPG genre. Their most notable game is Morning’s Wrath, a fantasy RPG released in 2005. 

Tom Novelli is a game developer and musician in western Massachusetts. He is currently porting Morning's Wrath to HTML5.