How to create a visualizer for audio player

Question

There are many music players, like even HTML5 audio player, but how can I add an equalizer to them? By equalizer I mean this: image (OP link to a picture of audio visualization)

Any idea how to add it to a music player?

Thanks in advance

Answer 1

Well, maybe it's too late, but still could help anyone.

If you want just visualize spectrum, then it's not big deal.

First of all, create your AudioContext, and then analyzer from it.

Add fillter, or gain node, if you want, and then consequentially connect them (i.e. one to other, and then another to last.). Finally, connect your audio destination.

example of code:

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');



// here we create our chain
var audio = document.querySelector('audio'),
    audioContext = new AudioContext(),
    source = audioContext.createMediaElementSource(audio),
    analyser = audioContext.createAnalyser();

source.connect(analyser);
analyser.connect(audioContext.destination);

setInterval(function(){
  var freqData = new Uint8Array(analyser.frequencyBinCount);

      analyser.getByteFrequencyData(freqData);

      ctx.clearRect(0, 0, width, height);

      for (var i = 0; i < freqData.length; i++ ) {
        var magnitude = freqData[i];
        ctx.fillRect(i*1.5, height, 1, -magnitude * 2);
      }
 }, 33);

Something like this one. Though you should aware of rapid changes in this API (this is why a lot of example of web audio API don't work properly).

I created simple music player with equalizer, you can check it here. You have to search something first (even blank line is ok) and then start music – canvas is at the bottom.