« WAVE-PD1 | Home | Web Audio API on 25% of iOS devices; 22.1% of Android devices can play audio in the built-in browser at all »

September 25, 2012

Visualizing <audio> elements with the Web Audio API

Cameron Adams has penned an excellent article providing insight on how to use the Web Audio API to create a visualizer based on whatever is playing via the <audio> element on a web page. The sample code provided is actually quite simple and there is both source code is available for download and a functioning demo.

Cameron's article has already inspired another example, created by Chris Bannon. Chris' example uses the KnockoutJS and Wijmo frameworks to create what is essentially a 5-band vertical meter hard-coded (from L to R) at 200 Hz, 400 Hz, 600 Hz, 800 Hz, and 1kHz.

Update: Found another visualizer today, this time utilizing local file access and drop events. Kinda neat! The source code is available, too.