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:
HTML Canvas & Processing JS
I have been experimenting with the new HTML 5 Canvas and trying to get up to speed on the syntax. As a seasoned Actionscript 3 developer, I find JS easy to understand but difficult to write. I find myself thinking flash and trying to work a flash approach. Anyhow, I have tried canvas with js and canvas with Raphael and now canvas Processing JS.
They all have advantages and drawbacks. Processing js is giving me the most fun for now and I can’t wait till they finish implementing the entire set of methods, or at least what’s left that can be implemented into canvas.
I have read some eager articles saying that this can replace Flash and will be the end of flash. This may be so at some point in the future, but I can tell ya right now, it’s not even close. With no dedicated VM it craps out if you try anything with a couple hundred worthy sprites on screen. Also, objects are painted onto the canvas and no longer exist as objects you can have a pointer to. You basically have to paint the the canvas each time with your updates, example: Processing uses pushMatrix() and popMatrix() to store and restore stage translations. This is pissing me off and I am still trying to get my head around it. I just want to move stuff around dang it. On the other hand, when you paint, you can have an infinite amount of detail without worrying about overhead, like when you pipe MC’s into Bitmap object in Flash.
It’s all good though and a step in the right direction as far as I am concerned. No plugins, no 3rd party expensive IDE’s etc. It’s all free range and organic, yay. Can’t wait to start working in some div’s, copy etc and growing the graphics and UI for html pages.
As with all things animation and drawing, I like to start off with basic math and growing plants, trees, etc. Processing has no real shading, 3d or drop shadowing built in right now and it’s kind of refreshing going back to the old way of thinking where you have to fake it all.
Here is a screen shot of some alien plant thing I am writing. It takes about 20 mins to draw the entire 360 view. The depth and dimension is all fake like I said, drawing all the highlights, shadows etc in separate passes with slight offsets. Demo of my first processing attempt here.
Rendering Plants with Processing JS
