I'm curious how he was able to synchronize to the audio. I have found with at least Chrome on OSX, the audio tag's callbacks have a varying delay with the audio. Seems to be at the OS level and beyond Chrome's control. The delay mostly goes away the second time through, as if whatever's actually playing the mp3 is cached and primed.

In Chrome, the Web Audio API is used -- not using an audio tag. As each chunk of the buffer comes in to be played and decoded, it's processed for spectrum and waveform data: https://github.com/jsantell/dancer.js/blob/master/src/adapte...

very nice. good to see this as an open js library which uses canvas. seeing these kind of visualisations always makes me wonder though... is the amplitude of the spectrum all the info we can obtain and use for visualisation? How difficult would it be to make an api that can detect the different types of sound in a sample and put out different data streams for each?

that would be.. tricky. almost impossible to generalize, I'd imagine, but who knows

This would have made my hack project a lot easier. Made this visualizer using Mozilla's Audio Data API and canvas (so it only works in FF). http://students.washington.edu/rishia/colors/colors.html

Love it! Please hook this up with SoundCloud.

Someone has gotten it working with the soundcloud api to pull in songs from soundcloud and visualize it, getting an example up on the repo :) or do you mean natively on the soundcloud website? (something else I'd love to do!)