Sunday, October 24, 2010: Audio Data API in Firefox 4: audio generation demo « from the old blog archive »

(Update: I just came back home, so I will fill this post with some technical details)

I just spoke at #barcampbkk4 about the Audio Data API that's coming in Firefox 4.

The demo: http://blog.dt.in.th/stuff/audiodata/

• Click for a crash cymbal.
• Move the mouse: control the appregiator.
• Accelerometer: control pad's lowpass filter (a very simple lowpass)
• Sound only, no visualization.

Technical info:

There are 5 samples used: kick, snare, closed hihat, open hihat and crash cymbal. These samples are converted to 32bit float raw file using Audacity (44100 hz, mono), and then are converted to array using a convertor written in PHP. All melodic sounds are generated using an oscillator.

This demo does not use dsp.js because at that time I haven't figured out how to use it.

Instead, it used a very simple approach by putting all tracks in a single array. Each track is an object (or you can say singleton class) which has the following methods:

• init will be called at the very beginning, used to set up event handlers (if there are any).
• trigger will be called every 1 step. The track can use this moment to update its frequency, etc etc.
• sample will be called for each sample. This method needs to return the sample for this track.

At the beginning, the script will call init() method for each object in the array. When the user clicks the start button, it will create 2 timers, one every 60000 / 130 / 4 msec (= 1/4 beat if BPM is 130), and one every sample.

The first timer will call the trigger() method on each object in the array, and another one goes through the array, call the sample() method and sum it up, and commit the audio buffer to the audio tag.