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

  let startButton = document.getElementById("start");
  startButton.addEventListener("click", () => {
    console.log("click");
    if (!audioCtx) {
      (async () => {
        let stream = null;

        try {
          stream = await navigator.mediaDevices.getUserMedia({
            audio: true,
            video: false
          });

          audioCtx = new AudioContext();
          if (!analyser) analyser = audioCtx.createAnalyser();

          //connect to analyser here
          const audioSourceNode = audioCtx.createMediaStreamSource(stream);
          audioSourceNode.connect(analyser);
          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();
          /* use the stream */
        } catch (err) {
          console.log(err);
          /* handle the error */
        }
      })();
    }
  });
};