JSFiddle - React, Tailwind, and code Playground

by mohayonao

HTML

<button id="test">test</button>
<div id="state"></div>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var audioContext = new AudioContext();
var buffer = audioContext.createBuffer(1, 4, audioContext.sampleRate / 4);

buffer.getChannelData(0).set(new Float32Array([ 0, 1, 0, -1 ]));

var $state = document.getElementById("state");
var iterations = 0;
var nodes = 0;

document.getElementById("test").onclick = function() {
  "use strict";
  
  function synth() {
    var t0 = audioContext.currentTime;
    var t1 = t0 + 0.025;
    var source;
    var biquadFilter = audioContext.createBiquadFilter();
    var gain = audioContext.createGain();

    source = audioContext.createOscillator();
    // source = audioContext.createBufferSource();
    // source.buffer = buffer;
    // source.loop = true;

    source.start(t0);
    source.stop(t1);
    source.connect(biquadFilter);
    source.addEventListener("ended", function() {
      // gain.disconnect();
      nodes -= 1;
    });
    
    biquadFilter.connect(gain);
    
    gain.gain.value = 0.1;
    gain.connect(audioContext.destination);
    
    iterations += 1;
    nodes += 1;
    $state.textContent = "iteration: " + iterations + " / nodes: " + nodes;
  }
  
  setInterval(synth, 5)
};