Performance issues with hundreds of queued BufferSources

Hi all,

I'm building a web app that takes a representation of a song (basically, a
list of [offset, pitch, duration] JavaScript objects) and plays it using
the Web Audio API. I have an soundfont with an MP3 for each possible pitch.

When the user presses Play, the app loops over all the notes in the song
and queues the notes' MP3s, using noteOn() -- standard Web Audio API stuff.
For short songs, this works quite nicely, as the notes are perfectly timed
with respect to one another, and the code is easy to understand.

My problem is, for songs that have many notes (many == 500 or more), I run
into performance issues: the audio gets distorted and/or laggy. This
happens in the latest versions of both Chrome and Safari. I assume it's
happening because I've queued hundreds of BufferSources and that eats up
too much memory and/or CPU.

So my question is: what's a better way of approaching this?

Should I queue a couple seconds' worth of notes with noteOn(), then
continually add to the queue, perhaps using requestAnimationFrame to
approximate precise timing? (The precise timing of noteOn() is pretty
important for my application.) Any other ideas?

Thanks,
Adrian

--
Adrian Holovaty
http://www.holovaty.com/