JSFiddle - React, Tailwind, and code Playground

by halfbyte

HTML

<p><label><input min=1 max=200 value=10 type="range" name="freq" id="freq">LFO Frequency <span id="freq-val"></span></label></p>
    <p><label><input min=0 max=100 value=0 type="range" name="depth" id="depth">LFO Depth <span id="depth-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 / 4) + " Hz");
    var depth = $('#depth').val();
    $('#depth-val').html("" + depth + " cent");
    console.log(freq, depth);
    var osc = ac.createOscillator();
    var lfo = ac.createOscillator();
    osc.type = osc.SAWTOOTH;
    var amp = ac.createGainNode();
    var lfoAmp = ac.createGainNode();
    lfo.connect(lfoAmp);
    lfoAmp.connect(osc.detune);
    osc.connect(amp);
    amp.connect(ac.destination);
    
    lfo.frequency.value = freq / 4;
    lfoAmp.gain.value = depth;
    
    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);