Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a visualizer for audio player [duplicate]

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

like image 553
Alex Avatar asked Oct 05 '13 15:10

Alex


3 Answers

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.

like image 178
Bloomca Avatar answered Oct 14 '22 19:10

Bloomca


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

like image 7
Dylan Kay Avatar answered Oct 14 '22 19:10

Dylan Kay


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.

like image 1
Alexandr Subbotin Avatar answered Oct 14 '22 20:10

Alexandr Subbotin