How should I handle heavy audio load with JavaScript/HTML5?

Question

I'm building a little sequencer like this one, but want to use HTML/JavaScript exclusively (i.e: no Flash).

As you play around with the applet in the link above, you'll notice the potential for several sounds to play simultaneously and/or in rapid succession. I'm using an array of audio objects simulating different 'slots' or channels to achieve the desired polyphony and, as a concept, this seems to work. I'm not experiencing any clipping or cutouts in my audio.

However, this process becomes prohibitively resource-intensive very quickly, regardless of source filetype/compression. It's not uncommon for the web browser itself to crash as the number of sounds playing increases.

So, I"m wondering: What, if any, is the best way to facilitate a fairly heavy audio load without choking the browser? Or, is trying to make HTML/JS work for this purpose a fool's errand?

Any insight would be much-appreciated. Here is a version without sound.

Answer 1

I cant say myself, but here's some examples making use of the new web audio api. http://chromium.googlecode.com/svn/trunk/samples/audio/index.html The drum machine is pretty taxing on my system, though. In any case, I figure you'd be interested in the link.