sounds good: hacking through the jungle of html5 audio

Audio is a more difficult thing for computers to get right. Even the humble(?) task of providing low-latency (i.e. quick response) audio clip playback is a challenge for some systems (I saw this first with using the minim library in Processing). And I'm talking basic audio, not heavily processed stuff, or even strictly "real time"-- enough so that in a game you can easily tell what onscreen event triggered the noise, not that you can base a "Guitar Hero" clone off of it.

tl;dr: Introducing lowLag.js Sound: a simple wrapper for low-latency, high-compatibility, html5-friendly audio. 

It gives you three comands: init(), load(), and play(), and provides nice speedy sound across most browsers. See its official homepage or its github page for more.

The background:

I asked my buddy Darius Kazemi if had a recommendation- he helped Subatomic Studios make an HTML5 port of their iOS game Fieldrunners (You might want to his New Game 2011 Post Mortem on the porting process) and his quick answer was

Soundmanager2 is the standard. Definitely use that.

SoundManager 2's turned out to be a decent recommendation, thanks in part to the online documentation: even though the primary download seems to be a whole source tree, you just need to pluck a few files out for use, as outlined on the template example page (the API and Demo code page was also helpful.)

So SoundManager2 (with its two-fisted Flash-object with html5 fallback) worked on most browsers, it had much lag, especially on Chrome. I mentioned this to Darius and he told me that on chrome he usually goes straight to the Webkit Audio API, and sent me his example page.

So now I had 3 different techniques for audio. I made 3 test pages: one for the <audio> tag cloning technique, one using soundmanager2, and one using webkitAudio. Each page has a high pluck sound button, a low pluck sound button, and a button to play both at once.

Anyway, the webpage shows the detailed work I did in finding out what techniques worked best in which browsers, and then how I wrapped those in a single easy-to-use wrapper js object. I know I'm going to use it on upcoming game projects.

Enjoy!