<input type="file" accept="audio/*" id="fileupload">
<br />
<audio id="audio" controls>
  Your browser does not support the audio element.</audio>

<div id="analyserOut">
</div>
window.onload = () => {
  const audioElement = document.getElementById("audio");
  const fileElement = document.getElementById("fileupload");
  const analyserDiv = document.getElementById("analyserOut");
  let audioCtx;
  let source;
  let analyser;

  fileElement.onchange = function () {
    audioCtx = new AudioContext();
    if (!source) source = audioCtx.createMediaElementSource(audioElement);
    if (!analyser) analyser = audioCtx.createAnalyser();
    const fileList = this.files;
    audioElement.src = URL.createObjectURL(fileList[0]);
    audioElement.load();
    audioElement.play();

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.