<div id=time>Time domain data

<canvas id=scope></canvas>

</div>

<div id=frequency>

Frequency domain data

<canvas id=freq></canvas>

</div>

<pre>

// gain

var g = ctx.createGain();

g.connect(sink);

source.connect(g);

g.gain.setValueAtTime(0, 0);

g.gain.linearRampToValueAtTime(1.0, 5);

​

// delay

var d = ctx.createDelay();

var g = ctx.createGain();

d.connect(g);

g.gain.value = 0.5;

g.connect(sink);

source.connect(d);

source.connect(sink);

g.connect(d);

d.delayTime.value = 0.1;

source.connect(d);

​

// biquad

var b = ctx.createBiquadFilter();

b.frequency.value = 1500;

b.connect(sink);

source.connect(b);

​

// Waveshaper

function makeDistortionCurve( amount ) {

  var k = typeof amount === 'number' ? amount : 50,

    n_samples = 44100,

    curve = new Float32Array(n_samples),

    deg = Math.PI / 180,

    i = 0,

    x;

  for ( ; i < n_samples; ++i ) {

    x = i * 2 / n_samples - 1;

    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );

  }

  return curve;

}

​

var ws = ctx.createWaveShaper();

ws.curve = makeDistortionCurve();

source.connect(ws);

ws.connect(sink);

​

// verb

getFile(url, function(data) {

  getFile(verb, function(verb) {

    var source = ctx.createBufferSource();

    source.buffer = data;

    source.loop = true;

    source.playbackRate.value = 1.44;

    var c = ctx.createConvolver();

    c.buffer = verb;

    source.connect(c);

    c.connect(sink);

    source.start(0);

  });

});

​

</pre>