JSFiddle - React, Tailwind, and code Playground

HTML

create random game noises<br>
<button id="start">RandomNoise</button>
<br>
complexity: <input type="range" oninput="showVal(this.value,'cv')" onchange="showVal(this.value,'cv')" min=0 max=4 value=2 id="complexity"> <span id="cv">2</span><br>
length: <input type="float" min=0 max=10 id="length" value="0.2"> sec<br>
    crunch: <input type="range" oninput="showVal(this.value,'crv')" onchange="showVal(this.value,'crv')" min=0 max=10000 id="crunch" value="2000"> <span id="crv">2000</span> <br>
presets: <button onClick=setPreset("hit")>hit</button>
    <button onClick=setPreset("bonus")>bonus</button>
    <button onClick=setPreset("explo")>explo</button>
<script>
    function setPreset(str)
    {
        switch(str)
        {
            case "hit":
                document.getElementById("length").value=0.2;
                document.getElementById("crunch").value=4000;
                document.getElementById("complexity").value=4;
            break;
            case "explo":
                document.getElementById("length").value=1;
                document.getElementById("crunch").value=10000;
                document.getElementById("complexity").value=4;
            break;
            case "bonus":
                document.getElementById("length").value=0.5;
                document.getElementById("crunch").value=300;
                document.getElementById("complexity").value=1;
            break;
        }
        showVal(document.getElementById("complexity").value,'cv');
        showVal(document.getElementById("crunch").value,'crv');
        document.getElementById("start").click();
    }
    function showVal(v,w){
        document.getElementById(w).innerHTML=v;
    }// must be defined here, else the scope is onload!
</script>

CSS

body {
    font-size: 25px;
}

JavaScript

var context;
if (typeof AudioContext !== "undefined") {
    context = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
    /*jshint newcap:false*/
    context = new webkitAudioContext();
} else {
    window.alert("WebAudio isn't supported in this browser yet :-(");
    throw new Error('AudioContext not supported. :(');
}

var mod, modGain, osc;

var out = context.destination;
function randomType()
{
    var tps=["sine","square","triangle","sawtooth"];
    return tps[Math.floor(Math.random()*tps.length)];
}
function deleteModulator(mod)
{
    mod.o.stop(0);
	mod.g=null;
    mod.o=null;
    mod=null; 
}
function createModulator(freq)
{
    var o={};
    o.o=context.createOscillator();
    o.t=randomType();
    o.o.type=o.t;
    o.f=Math.random()*freq+0.1;
    o.o.frequency.value = o.f;
    o.g=context.createGain();
    var crunch=document.getElementById("crunch").value;
    o.gv=crunch*Math.random();
    o.g.gain.value =o.gv;
    o.o.connect(o.g);
    o.o.start(0);
    return o;
}

var startTest = function(){
    mod1 = createModulator(1);
    mod2 = createModulator(2);
    mod3 = createModulator(3);
    mod4 = createModulator(4);
    mod5 = createModulator(10);
    
    osc = context.createOscillator();
    osc.frequency.value =20+Math.random()*1000;

    var complex=document.getElementById("complexity").value;
    if(complex>=4) mod5.g.connect(mod4.o.frequency);
    if(complex>=3) mod4.g.connect(mod3.o.frequency);
    if(complex>=2) mod3.g.connect(mod2.o.frequency);
    if(complex>=1) mod2.g.connect(mod1.o.frequency);
    mod1.g.connect(osc.frequency);
    
    var l=parseFloat(document.getElementById("length").value);
    
    var env = context.createGain();
    osc.connect(env);
    env.connect(out); //context.destination
    var now = context.currentTime;
    env.gain.cancelScheduledValues( now );
    env.gain.setValueAtTime(env.gain.value, now);
    env.gain.linearRampToValueAtTime(0 , now + l);
//    osc.connect(out);
   ...