Javascript & HTML5 Audio-Visualizer

FULL SCREEN

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.