JSFiddle - React, Tailwind, and code Playground

by halfbyte

HTML

<button id="play">&gt;</button>

CSS

button { font-size: 3em;}

JavaScript

var c = new webkitAudioContext();
var d = c.createDelayNode();
var df = c.createBiquadFilter();
var dg = c.createGainNode();
var dgo = c.createGainNode();
d.delayTime.value = 0.35;
d.connect(df);
d.connect(dgo);
df.connect(dg);
dg.connect(d);
dgo.connect(c.destination);
df.type = df.HIGHPASS;
df.frequency.value = 500;
df.Q = 2;

dg.gain.value = 0.6;
dgo.gain.value = 0.6;


var i = 0;
$('#play').click(function() {
    var o = c.createOscillator();
    var g = c.createGainNode();
    var f = c.createBiquadFilter();

    var highF = 880.0 * Math.pow(2, i);
    var lowF = highF / 32;

    g.connect(d);
    g.connect(c.destination);
    o.connect(f);
    f.connect(g);
    o.type = o.SAWTOOTH;
    o.frequency.value = highF / 16;

    f.type = f.LOWPASS;

    f.frequency.setValueAtTime(lowF, c.currentTime);
    f.frequency.linearRampToValueAtTime(highF, c.currentTime + 0.1);
    f.frequency.setValueAtTime(highF, c.currentTime + 0.40);
    f.frequency.linearRampToValueAtTime(lowF, c.currentTime + 0.5);
    f.Q.value = 10;

    g.gain.setValueAtTime(0.0, c.currentTime);
    g.gain.linearRampToValueAtTime(0.2, c.currentTime + 0.05);
    g.gain.setValueAtTime(0.2, c.currentTime + 0.45);
    g.gain.linearRampToValueAtTime(0.0, c.currentTime + 0.5);
    o.noteOn(0);
    o.noteOff(c.currentTime + 0.5);
    i = (i + 1) % 5;
});