HTML5 Audio Synthesizer

I built this synthesizer purely in HTML and JavaScript using the Firefox audio data API. The way it works is an audio source is initialized with a callback which generates wave data. I coded up three oscillators and a volume envelope to give the sound a little more character.

Key up/down events are trapped and drive the audio when a new buffer is requested. The biggest issue I have with this demo is the huge buffering delay. Unfortunately, I couldn’t do much about it because it’s imposed by Firefox, which requires a 500ms delay between writing audio buffers.

To use it, click the link below, wait for the page to load and then press any of the top two rows of keys on your keyboard (Q-P, and a handful of number keys). You can also tweak the parameters while it’s playing, which is a fun way to torture your friends and family : )

Check it out: http://visualcore.com/htmlsynth/

Tagged Tags: audio, firefox, html on April 11, 2011 at 11:47 pm