window.onload = () => {
  const analyserDiv = document.getElementById("analyserOut");
  let audioCtx;
  let analyser;
  let oscillator;
  let isPlaying = false;

  let startButton = document.getElementById("start");
  startButton.addEventListener("click", () => {
    if (!audioCtx) audioCtx = new AudioContext();
    if (!analyser) analyser = audioCtx.createAnalyser();

    if (!isPlaying) {
      oscillator = audioCtx.createOscillator();
      oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
      oscillator.connect(analyser);
      oscillator.start();
    } else {
      oscillator.stop();
    }
    isPlaying = !isPlaying;

    analyser.connect(audioCtx.destination);

    analyser.fftSize = 32;
    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);

    function log() {
      window.requestAnimationFrame(log);
      analyser.getByteFrequencyData(dataArray);
      const output = [];
      dataArray.forEach((number) => {
        output.push(`<div>${Array(number).fill("-").join("")}</div>`);
      });
      analyserDiv.innerHTML = output.join("");
    }
    log();
  });
};