var audioCtx = window.AudioContext || window.webkitAudioContext;

var audioContext, canvasContext;

​

var filters = [];

​

var canvas;

var analyser;

var width, height;

var dataArray, bufferLength;

​

window.onload = function() {

  audioContext= new audioCtx();

  canvas = document.querySelector("#myCanvas");

  width = canvas.width;

  height = canvas.height;

  canvasContext = canvas.getContext('2d');

  buildAudioGraph();

  requestAnimationFrame(visualize);

};

​

function buildAudioGraph() {

  var mediaElement = document.getElementById('player');

    mediaElement.onplay = (e)=>{audioContext.resume();}

​

    // fix for autoplay policy

  mediaElement.addEventListener('play',() => audioContext.resume());

​

  var sourceNode =   audioContext.createMediaElementSource(mediaElement);

  // Create an analyser node

  analyser = audioContext.createAnalyser();

  // Try changing for lower values: 512, 256, 128, 64...

  analyser.fftSize = 1024;

  bufferLength = analyser.frequencyBinCount;

  dataArray = new Uint8Array(bufferLength);

  // create the equalizer. It's a set of biquad Filters

​

​

    // Set filters

    [60, 170, 350, 1000, 3500, 10000].forEach(function(freq, i) {

      var eq = audioContext.createBiquadFilter();

      eq.frequency.value = freq;

      eq.type = "peaking";

      eq.gain.value = 0;

      filters.push(eq);

    });

​

   // Connect filters in serie

   sourceNode.connect(filters[0]);

   for(var i = 0; i < filters.length - 1; i++) {

      filters[i].connect(filters[i+1]);

    }

​

   // connect the last filter to the speakers

   filters[filters.length - 1].connect(analyser);

  analyser.connect(audioContext.destination);

}

​

function visualize() {

  // clear the canvas

  // like this: canvasContext.clearRect(0, 0, width, height);

  // Or use rgba fill to give a slight blur effect

  canvasContext.fillStyle = 'rgba(0, 0, 0, 0.5)';

  canvasContext.fillRect(0, 0, width, height);

  // Get the analyser data

  analyser.getByteTimeDomainData(dataArray);

​

  canvasContext.lineWidth = 2;

  canvasContext.strokeStyle = 'lightBlue';

​

  // all the waveform is in one single path, first let's

  // clear any previous path that could be in the buffer

  canvasContext.beginPath();

  var sliceWidth = width / bufferLength;

  var x = 0;

​

  for(var i = 0; i < bufferLength; i++) {

     var v = dataArray[i] / 255;

     var y = v * height;

​

     if(i === 0) {

        canvasContext.moveTo(x, y);

     } else {

        canvasContext.lineTo(x, y);

     }

​

     x += sliceWidth;

  }

​

  canvasContext.lineTo(canvas.width, canvas.height/2);

  // draw the path at once

  canvasContext.stroke();  

  // call again the visualize function at 60 frames/s

  requestAnimationFrame(visualize);

}

​

function changeGain(sliderVal,nbFilter) {

  var value = parseFloat(sliderVal);

  filters[nbFilter].gain.value = value;

  // update output labels

  var output = document.querySelector("#gain"+nbFilter);

  output.value = value + " dB";

}

​

​