HTML5 Spectrum Analyzer: In 3d

I've created a new 3d version of my HTML5 audio spectrum analyzer using Three.js.



Check it out here

Where it used a d3 bar chart before, the frequency amplitude is now represented in changing the size of some classy wood-paneled 3d cubes.

You can use mouse and scroll over the scene itself to orbit the camera around the cubes.

Like the older version, the default audio is some music I made but you can enter any URL or use live input in Chrome Canary.  All of the other slider controls are the same too.

3d version on Github

Quick Project: D3 / HTML5 Web Audio Spectrum Analyzer

For fun this last week I made a spectrum analyzer using D3 and the HTML5 Web Audio API.  Been meaning to check those out for a while, and spectrum analyzer seemed like the natural way to kill two birds.

Here it is running on Heroku with some of my music as the example track

http://d3-spectrum.herokuapp.com

And the github page here:

https://github.com/arirusso/d3-audio-spectrum

Increasing the curve setting gives the spectrum a more logarithmic display, traditionally more common for audio spectrum analyzers.

The other controls are pretty straightforward

Enjoy

Updates:
Adding live audio input in Chrome Canary (10/4/2012)