Drawing waves with JS Opus Recorder

Opus Recorder is a javascript lib that makes easy recording audio and converting to Opus

I've adapted some code found here to draw waves while recording with Opus Recorder

First you need an HTML Canvas

 <canvas id="analyser"></canvas>

This is where your waves will be drawn

in the onstart method we create and connect the analyser

  recorder.onstart = function (e) {
  (...)
    analyserNode = recorder.audioContext.createAnalyser();
    analyserNode.fftSize = 2048;
    recorder.recordingGainNode.connect(analyserNode)
    updateAnalysers(); //will be defined later
  }

Disconnect on pause, stop, and reconnect on resume

recorder.onstop = function (e) {
    (...)
    cancelAnalyserUpdates()
  };

  recorder.onpause = function (e) {
    (...)
    cancelAnalyserUpdates()
  };
 recorder.onresume = function (e) {
    (...)
    updateAnalysers();
  };
  function cancelAnalyserUpdates() {
    window.cancelAnimationFrame(rafID);
    rafID = null;
  }

Then the draw method is basically the one you can find on the first link, excepect that I've made the bar wider

var updateAnalysers = function (time) {
    if (!analyserContext) {
      var canvas = document.getElementById("analyser");
      canvasWidth = canvas.width;
      canvasHeight = canvas.height;
      analyserContext = canvas.getContext('2d');
    }

    // analyzer draw code here
    {
      var SPACING = 3;
      var BAR_WIDTH = 3;
      var numBars = Math.round(canvasWidth / SPACING);
      var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);

      analyserNode.getByteFrequencyData(freqByteData);

      analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
      analyserContext.fillStyle = '#F6D565';
      analyserContext.lineCap = 'round';
      var multiplier = analyserNode.frequencyBinCount / numBars;

      // Draw rectangle for each frequency bin.
      for (var i = 0; i < numBars; ++i) {
        var magnitude = 0;
        var offset = Math.floor(i * multiplier);
        // gotta sum/average the block, or we miss narrow-bandwidth spikes
        for (var j = 0; j < multiplier; j++)
          magnitude += freqByteData[offset + j];
        magnitude = magnitude / multiplier;
        var magnitude2 = freqByteData[i * multiplier];
        analyserContext.fillStyle = "hsl( " + Math.round((i * 360) / numBars) + ", 100%, 70%)";
        analyserContext.fillRect(i * SPACING, canvasHeight, BAR_WIDTH, -magnitude);
      }
    }

    rafID = window.requestAnimationFrame(updateAnalysers);
  }