JSFiddle - React, Tailwind, and code Playground

by halfbyte

HTML

<p>
    <label>
        <input min=1 max=200 value=50 type="range" name="freq" id="freq">LFO Frequency <span id="freq-val"></span>
    </label>
</p>
<p>
    <label>
        <input min=0 max=100 value=50 type="range" name="depth" id="depth">LFO Depth <span id="depth-val"></span>
    </label>
</p>
<p>
    <label>
        <input min=10 max=2000 value=1000 type="range" name="ffreq" id="ffreq">Filter F <span id="ffreq-val"></span> Hz</label>
</p>
<p>
    <label>
        <input min=0 max=40 value=0 type="range" name="Q" id="Q">Resonance <span id="Q-val"></span>
    </label>
</p>
<button id="play">Play</button>

CSS

body {
    font-family: sans-serif;
}

JavaScript

var ac = new webkitAudioContext();



var play = function () {
    var freq = $('#freq').val();
    $('#freq-val').html("" + (freq / 8) + " Hz");
    var ffreq = $('#ffreq').val();
    $('#ffreq-val').html("" + (ffreq));
    var depth = $('#depth').val();
    $('#depth-val').html("" + depth);
    var Q = $('#Q').val();
    $('#Q-val').html("" + Q);
    var osc = ac.createOscillator();
    var lfo = ac.createOscillator();
    var filter = ac.createBiquadFilter();
    osc.type = osc.SQUARE;
    var amp = ac.createGainNode();
    var lfoAmp = ac.createGainNode();
    lfo.connect(lfoAmp);
    lfoAmp.connect(filter.frequency);

    osc.frequency.value = 55;

    filter.Q.value = Q;
    filter.frequency.value = ffreq;

    osc.connect(filter);
    filter.connect(amp);
    amp.connect(ac.destination);

    lfo.frequency.value = freq / 4;
    lfoAmp.gain.value = depth / 100 * ffreq;

    amp.gain.setValueAtTime(0, ac.currentTime);
    amp.gain.linearRampToValueAtTime(1, ac.currentTime + 0.001);
    amp.gain.setValueAtTime(1, ac.currentTime + 0.3);
    amp.gain.linearRampToValueAtTime(0, ac.currentTime + 0.5);
    osc.noteOn(ac.currentTime);
    osc.noteOff(ac.currentTime + 0.5);
    lfo.noteOn(ac.currentTime);
    lfo.noteOff(ac.currentTime + 0.5);
};

var button = document.getElementById('play');
button.addEventListener('click', play, false);