<body>
  <input type="file" id="file" accept="audio/*" />
  <canvas id="waveform" width="400" height="200"></canvas>
</body>
input {
  display: block;
  margin-bottom: 8px;
}

canvas {
  background: #eeeeee;
}

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
const canvas = document.getElementById("waveform");
const canvasContext = canvas.getContext("2d");
document.getElementById("file").addEventListener("change", function (e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = function (e) {
    const arrayBuffer = e.target.result;
    audioContext.decodeAudioData(arrayBuffer).then((audioBuffer) => {
      const pcmData = audioBuffer.getChannelData(0);
      canvasContext.clearRect(0, 0, canvas.width, canvas.height);
      canvasContext.beginPath();
      for (let i = 0; i < pcmData.length; i++) {
        const sample = pcmData[i]; // -1.0 ~ 1.0
        const x = (i / pcmData.length) * canvas.width;
        const y = (sample + 1) * (canvas.height / 2);
        if (i === 0) {
          canvasContext.moveTo(x, y);
        } else {
          canvasContext.lineTo(x, y);
        }
      }
      canvasContext.stroke();
    });
  };
  reader.readAsArrayBuffer(file);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.