Make some noise: In-Depth Web Audio API

Disclaimer

Examples use latest API

Soledad's Article on xBrowser Web Audio API

I need a Beep

Beep

    var ac = new AudioContext();
    var osc = ac.createOscillator();
    osc.connect(ac.destination);
    osc.start(0);
    osc.stop(ac.currentTime + 0.2);

Sound Sources

Oscillator

    var ac = new AudioContext();
    var osc = ac.createOscillator();
    osc.connect(ac.destination);
    osc.type = ['sine', 'triangle', 'sawtooth', 'square'][i]
    osc.start(0);
    osc.stop(ac.currentTime + 0.2);

BufferSource

    
    var src = ac.createBufferSource();
    src.buffer = [well. the buffer.]
    src.connect(ac.destination);
    src.start(0);
    // src.stop(ac.currentTime + 0.2);

Loading an AudioBuffer

How to load and decode audio with the web audio api

Scheduling

A diagram on timing in the web audio API

Frequency Modulation #1

    
var osc = ac.createOscillator();
osc.connect(ac.destination);
osc.frequency.setValueAtTime(4000, ac.currentTime);
osc.frequency.linearRampToValueAtTime(
  440, 
  ac.currentTime + 0.2
);
osc.start(ac.currentTime);
osc.stop(ac.currentTime + 0.2);

Frequency Modulation #2

    
var osc = _ac.createOscillator();
osc.connect(_ac.destination);
osc.frequency.setValueAtTime(2000, ac.currentTime);
osc.frequency.linearRampToValueAtTime(
  50, 
  ac.currentTime + 0.05
);
osc.start(_ac.currentTime);
osc.stop(_ac.currentTime + 0.05);

Processing

Volume

var osc = _ac.createOscillator();
var amp = _ac.createGain();
osc.connect(amp);
amp.connect(_ac.destination)
amp.gain.setValueAtTime(1, _ac.currentTime);
amp.gain.linearRampToValueAtTime(0, _ac.currentTime + 0.15);
osc.start(_ac.currentTime);
osc.stop(_ac.currentTime + 0.2);

BiquadFilters

flt.type = "lowpass";
flt.Q.value = 25;
flt.frequency.setValueAtTime(1500, ac.currentTime);
flt.frequency.linearRampToValueAtTime(100, ac.currentTime + 0.4);
osc.connect(flt);
flt.connect(amp);

Convolver

var ramp = ac.createGain();
var rev = ac.createConvolver();
rev.buffer = _samples['t600.wav'];
// [...]
amp.connect(rev);
rev.connect(ramp);
ramp.connect(ac.destination);
amp.connect(ac.destination)

Panner

amp.connect(panner)      
panner.setPosition(Math.sin(pannerCounter++/2)/2, 0,0);
panner.connect(ac.destination);

Demo

Browser Support

Browser Support Now

Desktop Chrome since "ever"
Desktop Safari since 6 (old API)
Mobile Safari since iOS6 (old API)

Browser Support Soon-ish

Firefox/Gecko 26
(meaning: Probably Firefox OS 1.2)
Chrome/Android (no specific timeline afaik)

Prerecorded vs. Realtime

60s of uncompressed audio (stereo, 44.1kHz, .wav): ~5 MB
60s of compressed audio (stereo, 128kBits, .mp3): ~1 MB
20kB of uncompressed JavaScript: priceless
Mobile anyone?