Visualising <audio> elements with the Web Audio API

For a new project I'm working on I'd like to create an audio-reactive visualisation using analysis of the music that's playing. The new Web Audio API lets you do this pretty easily in the browser (Webkit-only at the moment).

The main concept in the Web Audio API is that you wire up a bunch of modules together. The output from one module going into the input of another module. To this with an <audio> element, you have to create a Web Audio source with it, wire that up to an analyser, and then wire the analyser up to your speakers (so that you can hear the original <audio> again).

Once you've done that, the analyser is now listening for any output from the <audio> and will have data waiting for you whenever you ask it.

Once you set the audio.play()ing you can query the analyser at any time and check what the current frequency data of the sound is. If we put that analysis into a simple draw() loop then we can graph out what the sound looks like:

function draw() {
// Setup the next frame of the drawing
webkitRequestAnimationFrame(draw);
// Create a new array that we can copy the frequency data into
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
// Copy the frequency data into our new array
analyser.getByteFrequencyData(freqByteData);
// Clear the drawing display
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// For each "bucket" in the frequency data, draw a line corresponding to its magnitude
for (var i = 0; i < freqByteData.length; i++) {
canvasContext.fillRect(i, canvas.height - freqByteData[i], 1, canvas.height);
}
}

Popular Entries

My Book: Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

About this site

The Man in Blue is the alter ego of Cameron Adams, a Web Technologist in MelbourneSydney, Australia. (That means he does graphic design, HTML/CSS, JavaScript, writing, server-side jiggery pokery, and anything else that takes his fancy that day.)

Cameron has been designing graphical/informational/software things on and off the Web since 1997. You can see more of Cameron's design work on his portfolio, and if you're interested his services are available for hire.