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)