All we need to do this visualizer is the data of the audio file. Web browsers provide an Audio API for this.
At first we need to add an <audio> element:
<audio id="myAudio" src="audio.mp3"></audio>
Next we get the data from the AnalyserNode:
window.onload = function() {
var ctx = new AudioContext();
var audio = document.getElementById('myAudio');
var audioSrc = ctx.createMediaElementSource(audio);
var analyser = ctx.createAnalyser();
// Connect the MediaElementSource with the analyser
audioSrc.connect(analyser);
// frequencyBinCount : number of values
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
// loop to use the data
function renderFrame() {
requestAnimationFrame(renderFrame);
// update data in frequencyData
analyser.getByteFrequencyData(frequencyData);
// render frame based on values in frequencyData
}
audio.start();
renderFrame();
};
Done!
Now we can use the data from the frequencyData object to display any animation we want corresponding to the audio file.
Here I use a canvas and I draw lines whose colors and length depend on frequencies values.