JSFiddle - React, Tailwind, and code Playground

by halfbyte

HTML

<p><label><input min=1 max=100 value=10 type="range" name="decay" id="decay">Decay</label></p>
    <p><label><input min=100 max=5000 value=200 type="range" name="start-freq" id="start-freq">Start frequency</label></p>
    <p><label><input min=1 max=200 value=50 type="range" name="end-freq" id="end-freq">End frequency</label></p>
<button id="play">Play</button>

CSS

body { font-family: sans-serif;}

JavaScript

var ac = new webkitAudioContext();



var play = function() {
    var decay = document.getElementById('decay').value;
    var start = document.getElementById('start-freq').value;
    var end = document.getElementById('end-freq').value;
    var sine = ac.createOscillator();
    var amp = ac.createGainNode();
    sine.connect(amp);
    amp.connect(ac.destination);
    sine.frequency.setValueAtTime(start, ac.currentTime);
    sine.frequency.exponentialRampToValueAtTime(end, ac.currentTime + (1/decay));
    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);
    sine.noteOn(ac.currentTime);
    sine.noteOff(ac.currentTime + 0.5);
};

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