Monday, October 1, 2012

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)

7 comments:

  1. This is some great work. For those who aren't Rubyists, are there any pointers you could give towards porting this to another backend? Not knowing Ruby, I'm not sure what would be comparable in say PHP or Python. Suggestions? Perhaps someone's forked this repo and already done something of the like?

    ReplyDelete
    Replies
    1. Hi, the Ruby component in this project does very little -- it's a small Rack configuration script that allowed me a quick setup on Heroku to serve up the audio. You could use WSGI in Python or plain PHP to write a similar script. If you were to leave out the remote audio playing, you could get away with having no server side scripting at all. Not sure if anyone else has done any of these things...

      Delete
    2. Also, thank you for the kind words!

      Delete
    3. Excellent news! I figured as much but wanted to verify before diving in. Forking now :P Thanks again!

      Delete
  2. Doesn't work in FF. :(

    ReplyDelete
    Replies
    1. Interesting! I'll try and update it if I get a chance

      Delete
  3. Hi, Please pardon my limited grasp on Javascript, but could you provide an example of this reading an array of #'s (ie. sensor measurements?) I'm trying to create a spectrum graph of frequencies & your example seems like it would be a great option!

    ReplyDelete