How to create a visualizer for audio player [duplicate]

Question

This question already has answers here:

How to write a web-based music visualizer? (4 answers)

Closed 4 years ago.

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

The Web Audio API is a very useful javascript tool and the following website shows an example of how to visualize audio with this API:

http://css.dzone.com/articles/exploring-html5-web-audio

Answer 2

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.

Answer 3

Now it is partly supported by browsers. You can use Web Audio API for google chrome and new safari and Audio Data API for Firefox.

Answer 4

Incidentally, here's some sample code that does a visual equalizer: http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs.