window.onload = () => {
  const fileElement = document.getElementById("fileupload");
  const analyserDiv = document.getElementById("analyserOut");
  let audioCtx;
  let analyser;

  fileElement.onchange = function () {
    audioCtx = new AudioContext();
    // if (!source) source = audioCtx.createMediaElementSource(audioElement);
    if (!analyser) analyser = audioCtx.createAnalyser();
    const fileList = this.files;

    console.log(fileList[0]);

    const reader = new FileReader();
    reader.onload = async (e) => {
      const buffer = await audioCtx.decodeAudioData(e.target.result);
      const source = audioCtx.createBufferSource();
      source.buffer = buffer;
      source.connect(analyser);
      analyser.connect(audioCtx.destination);
      source.start(0);

      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();
    };

    reader.readAsArrayBuffer(fileList[0]);
  };
};