Recently I have been investigating some of the new capabilities of web browsers that support HTML5 and include JavaScript enabled audio APIs. This video excerpt above is a screen capture of an audio visualization that I produced with Processing.js, HTML5 and the Audio Data API that’s built into Firefox 4 Beta. The audio analysis is based on code from this example by Corbin Brook.
Circles are drawn that vary in size dynamically based on the amplitude of the music. The track is Illuminator Console by Ostraka (John Keston) from the album Precambrian Resonance on Unearthed Music. This application will only work in Firefox 4 Beta. To view the full visualization visit the following link:
Some pretty kick ass visuals, after graduation when I have some more time I’ll have to look into experimenting as well.
Dude, freakin sweet. I got my kinect working with processing the other day.
Very nice John. Such great music to add responsive visuals to. It’s great to see something like this done outside of AS3 and Flash, and makes me wonder in what ways this could be extended. Hope to see a show soon.
Thanks for the props, @Dane, @Ben, and @Joey. Just curious, did you just watch the video, or did you checkout the actual application in Firefox 4 Beta? FYI: The audio sync on the video got a little off since the capture software I used only captured the visuals so I had to drop in the audio afterward. Works much better in realtime.