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.