Design & front-end development

Recent experiments

Web Audio API + canvas

Web Audio API + canvas

What is it?

I’ve always loved music visualisations, having spent many a childhood hour staring blankly at the Winamp or Windows Media Player visualizers. And seeing some of the crazy things people have been doing with canvas and WebGL recently I knew that was the kind of thing I wanted to be making when I started to learn canvas.

Problem with audio visualisations like this is that previously they would have required external dependencies to process the audio data, and so the barrier to entry for getting stuck in and playing around was slightly higher.

So when I found out the new Web Audio API comes built in with an AnalyserNode which allows you really easily get frequency data natively and without too much effort at all, I was pretty psyched.

The API literally lets you get the data you need with about 5 lines of JS to set up the audio context and then a for loop to iterate over the data, so easy! There’s plenty of tutorials on how to do this out there, like this one on HTML5Rocks.

I think this only currently works in Chrome but Safari should working soon, and hopefully Firefox will replace their proprietary implementation with the standards-based version soon too!

So with this I decided to faff about making some different visualisations – I haven’t really spent much time on each visualisation and as a result they aren’t particularly impressive, and the code is also a complete mess as I made almost 10 quick demos and then patched a few together for the sake of writing this. I just like how easy it is to play around and make stuff with the new API! Will definitely be making more of these in the future!

Demo uses stats.js and dat.gui, and the song is “Stay Up” by Evil Nine.