Audio Spectrum Analysis – Output to JSON File – Flash Tool
I have been unsuccessful so far in syncing animation drawn in Canvas using Processing js & audio played using the browser Audio tag with audio spectrum data I create from a ByteArray in Flash. It works in Flash due to the fact that the spectrum analysis and animation are executed together in an onEnterFrame event. The drawback to not having real time audio spectrum analysis from within the browser is the need to supply all the data to Processing js at initialization. It can be rather large and I have yet to perfect syncing the reading of the array with the current time of the audio. Some sort of progressive data stream and excellent timing system???
It may be I just have to wait until this feature is implemented into browsers. In the meantime, I thought I would post the source for the the Spectrum Analysis tool for greater minds than myself, wanting a quick way to get some data from their favorite tune and perhaps figure out a way to use it in a optimized fashion.
it’s very simple and outputs JSON with Left and Right channels to floating point numbers between 0 and 1. You can use it to make stuff move to the groove. It has a simple execution of this in the ui for you to see. Download the flash and php and throw it on your local server.
The process of accessing audio data from within the browser is quite beyond me, I really just want to see what I can create visually in Processing js and Canvas. Until it’s and easy to use API, I just have to keep looking for a way to get spectrum data quickly, hence this contraption. Have fun.
Download Source
This demo does not actually write the data for fear of abuse, but this is a sample of the output.
P.S. Carving Powder mp3 is one of my own creations. 
Related Posts:
Processing js Twitter search visualizer
I jumped over from Raphael back to Processing again today. I have said it before, us Flash guys might get frustrated trying to pull off some simple stuff in either Processing or Raphael. Just keep in mind that they are young languages and the future looks bright.
Anyway, another attempt to do something here with Processing. It took a me minute to find an elegant way to get Twitter json data into processing without being too sloppy. The visualizer works perfectly in Safari and Chrome but it’s completely hosed in Firefox? Demo Here
Processing JS Twitter Visualizer
