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

HTML5 Spectrum Analyzer: Live Audio Input

This week, I've added live audio input to the HTML5 spectrum analyzer.

http://d3-spectrum.herokuapp.com

Click the button that says Use audio input and then click Allow when prompted to give your browser access to your computer's audio input.  You can then click Use audio file to switch back to the audio file.

I've also added an intensity control that allows you to juice up the visual intensity without sacrificing volume or accuracy.

Of course, it may not work in your browser:

Is it ever that simple?  At time of writing HTML5 live audio input is only supported in Chrome Canary.  You need to go to about:flags in the URL bar, and then enable Web Audio Input near the bottom of the list

Spectrum Analyzer 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)