How to create a visualizer for audio player
Solution 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
Solution 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.
Solution 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.
Related videos on Youtube
Alex
Updated on March 06, 2020Comments
-
Alex over 4 years
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
-
Paritosh over 10 yearsThis doesn't belong to here... Please visit this page: What topics can I ask about here?
-
KANAYO AUGUSTIN UGThe image link is dead
-
-
Evan Layman over 9 yearsThis is really cool. Unfortunately, I was trying to use this on a chromecast device, and there's currently a bug filed where their audio element won't work with the analyser. code.google.com/p/google-cast-sdk/issues/detail?id=270