JavaScript -> Audio API -> Browser

JavaScript -> audiolib.js -> Audio API -> Browser

A little digital audio theory

• Samples
• Sample Rate
• Channels
• Bits Per Sample

Single-Channel Buffer

Two-Channel Buffer

a.k.a. Stereo

Audio API's in Browsers *

• Web Audio API (webkit)
• Audio Data API (mozilla)

* Not the same as the HTML5 <audio> object.

Oscillators

• Single and dual channel
• Wave shapes
• Frequency modulation
• Addition and mixing

Single Channel Oscillator

var osc, device, channels = 1;

var audioCallback = function(buffer, channelCount) {
	osc.append(buffer, channelCount);
};

device = audioLib.AudioDevice(audioCallback, channels);
osc = audioLib.Oscillator(device.sampleRate, 400);

demo

Multiple Channels

for (index = 0; index < buffer.length; index += 2){

  osc1.generate();
  osc2.generate();

  leftSample = osc1.getMix();
  rightSample = osc2.getMix();

  buffer[index] = leftSample;
  buffer[index + 1] = rightSample;

}

demo

Wave Shapes

• Sine
• Sawtooth
• Inverted Sawtooth
• Square
• Triangle
• Pulse

demo

Frequency Modulation

for (index = 0; index < buffer.length; index += channels) {

	lfo.generate();
	osc.fm = lfo.getMix();
	osc.generate();

	sample = osc.getMix();

	// fill buffer...

}

demo

Addition and Mixing

for (i = 0; i < oscillators.length; i++) {
  oscillators[i].generate();
  sample += oscillators[i].getMix() * level;
}

Only so much headroom is available.

User-controlled mixing versus computed.

demo