audiolib.js

audio synthesis in the browser

Created by Mike Hodnick [github.com/kindohm]

Why audio synthesis in the browser? *

*hint: because it is freaking awesome

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


Sample #0
Sample #1
Sample #2
Sample #3
Sample #4
Sample #5
Sample #6
...
Sample #N

Two-Channel Buffer

a.k.a. Stereo


Sample #0 L
Sample #0 R
Sample #1 L
Sample #1 R
Sample #2 L
Sample #2 R
...
Sample #N L
Sample #N R

Audio API's in Browsers *



* 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

Samples

  • Base64-encoded
  • Data islands vs. files vs. HTTP
  • Beware of samples >~ 500 KB

demo

Effects and Processing

var sample = 0;
generator.generate();
sample = generator.getMix();
effect.pushSample(sample);
sample += effect.getMix();

demo

Automation

demo #1

demo #2

Custom Generators

demo

Envelopes

adsr

demo

Sequencing

  • StepSequencer
  • roll your own

mario demo

Fast-Fourier Transforms

demo 1

demo 2

Putting it all together...

  • DJ Dubstep Llama
  • Off the Air
  • txt2sound

THE END

BY Mike Hodnick / kindohm.com