JSFiddle - React, Tailwind, and code Playground

by mohayonao

HTML

<button id="test">test</button>
<hr>
<textarea id="values"></textarea>

CSS

* { font-size: 1.2em }
#values { width: 100%; height: 400px }

JavaScript

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

const audioContext = new AudioContext();

document.getElementById("test").onclick = () => {
  "use strict";
  
  const t0 = audioContext.currentTime;
  const t1 = t0 + 2.5;
  const oscillator = audioContext.createOscillator();
  const biquadFilter = audioContext.createBiquadFilter();
  const gain = audioContext.createGain();
  const values = new Float32Array(100).map(() => {
    return 3520 * Math.pow(4, Math.random() - 0.5);
  });
  
  document.getElementById("values").textContent = JSON.stringify(Array.from(values));
  
  oscillator.type = "sawtooth";
  oscillator.frequency.value = 880;
  oscillator.start(t0);
  oscillator.stop(t1);
  oscillator.connect(biquadFilter);
  
  biquadFilter.type = "highpass";
  biquadFilter.frequency.setValueCurveAtTime(values, t0, t1 - t0);
  biquadFilter.Q.value = 12;
  biquadFilter.connect(gain);
  
  gain.gain.value = 0.2;
  gain.connect(audioContext.destination);
};