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