JSFiddle - React, Tailwind, and code Playground

by halfbyte

HTML

<p><label><input min=1 max=40 value=10 type="range" name="decay" id="decay">Decay</label></p>
    <p><label><input min=1000 max=10000 value=5000 type="range" name="freq" id="freq">Filter frequency</label></p>
    <p><label><input min=1 max=40 value=5 type="range" name="Q" id="Q">Filter resonance</label></p>
<button id="play">Play</button>

CSS

body { font-family: sans-serif;}

JavaScript

function NoiseNode(ac) {
  var buffer = ac.createBuffer(1, 44100, 44100);
  var src = ac.createBufferSource();
  array = buffer.getChannelData(0);
  console.log(array);
  for(i=0,l=array.length;i<l;i++) {
      array[i] = Math.random() * 2 - 1;
  }
  src.buffer = buffer;
  this.connect = function(node) {
      src.connect(node);
  };
  this.start = function(time) {
    src.start(time);
  }
  this.stop = function(time) {
    src.stop(time);
  }
  this.noteOn = this.start;
  this.noteOff = this.stop;
  return this;
}
var ac = new webkitAudioContext();
var play = function() {
    var decay = document.getElementById('decay').value;
    var freq = document.getElementById('freq').value;
    var Q = document.getElementById('Q').value;
    var noise = new NoiseNode(ac);
    var filter = ac.createBiquadFilter();
    filter.type = "bandpass";
    
    filter.frequency.value = freq;
    filter.Q.value = Q;
    
    var amp = ac.createGainNode();
    noise.connect(filter);
    filter.connect(amp);
    amp.connect(ac.destination);
    amp.gain.setValueAtTime(0, ac.currentTime);
    amp.gain.linearRampToValueAtTime(1, ac.currentTime + 0.001);
    amp.gain.setValueAtTime(1, ac.currentTime + 0.001);    
    amp.gain.linearRampToValueAtTime(0, ac.currentTime + (0.5/decay));
    noise.noteOn(ac.currentTime);
    noise.noteOff(ac.currentTime + 0.5);
};

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