examples/effects/analyser.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>web-audio-example</title>
</head>
<body>
  <audio src="/files/oppo.wav" controls>
    Your browser does not support the audio tag.
  </audio>
  <div>
    <canvas id="visualizer" width="800" height="400">
      your browser does not support the canvas tag
    </canvas>
  </div>
  <script>
    // create web audio context
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    // create source
    var myAudio = document.querySelector('audio');
    var source = audioCtx.createMediaElementSource(myAudio);

    // create analyser
    var analyser = audioCtx.createAnalyser();
    analyser.fftSize = 1024;
    var bufferlength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferlength);

    //connect nodes
    source.connect(analyser);
    analyser.connect(audioCtx.destination);
    
    // create canvas context
    var canvas = document.getElementById('visualizer');
    var canvasCtx = canvas.getContext('2d');
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var sliceWidth = canvasWidth / bufferlength; 
    canvasCtx.lineWidth = 2;
    canvasCtx.strokeStyle = 'rgb(0, 255, 0)';
    canvasCtx.fillStyle = 'rgb(0, 0, 0)';

    function draw() {
      requestAnimationFrame(draw);
      canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight);   
      canvasCtx.beginPath();

      analyser.getByteTimeDomainData(dataArray);
      // console.log(dataArray);

      var x = 0;
      for(var i = 0; i < bufferlength; i++) {
        var v = dataArray[i] / 255;
        var y = v * canvasHeight;
        if(i == 0) {
          canvasCtx.moveTo(x, y);
        } else {
          canvasCtx.lineTo(x, y);
        }
        x += sliceWidth;
      }

      canvasCtx.lineTo(canvasWidth, canvasHeight / 2);
      canvasCtx.stroke();
    }
    draw();
  </script>
</body>
</html>