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, making svg fonts and your server setup.
I had some trouble getting fonts to work in Processing and then more trouble when I posted the files to my Blog. I finally got it all working so this might save you some time.
Stuff you need:
- A True Type font, e.g Arial.ttf
- Batik TTF to SVG Convertor
- Possibly need access to either your servers httpd.conf or mime.types for .svg mime-type
If you have all this, you are going to get it working.
First off, put the ttf font you want to convert in the directory where you extracted Batik & pull up a terminal and cd to it.
Type: java -jar ttf2svg.jar myFont.ttf -o myFont.svg
Replacing the myFont with your font. The result should be myFont.svg, great!!!. Copy it to your working Processing dir.
In your Processing setup function add the lines:
font = loadFont
var myFont = loadFont("myFont.svg");
textFont(myFont, 12);
Test it and see if you like it, if not repeat the process with another font. Go ahead and upload to your server and test live.
Looks good, ? yes : no;
For a quick test to see if your server supports svg head over to http://web-sniffer.net/ and type the path to your svg font in the box and hit submit. On return, look down to the HTTP Response Header table and look @ the content-type. If it says anything other than image/svg+xml or at least something with svg in it, you need to do this next step.
This is the part that got me and where you need access to the server config files I listed above. If you do not, you need to contact your sys admin or service provider and tell them you need support for svg files. If you do, edit either the httpd.conf or mime.types file “depends on your server setup” and add the line:
AddType image/svg+xml .svg
or
Content-Type: image/svg+xml
again it depends on what flavor of Apache or whatever you have. You can Google your setup and find out.
Restart your server and you should be good to go. Happy Processing!
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
Related Posts:
Canvas, Audio, Raphael & Twitter
Last week I worked up an audio visualizer in Flash for a friend that yielded some nice results. The AS 3.0 ByteArray and computeSpectrum are powerful and have many potential uses. Doing the same thing with Canvas and JS requires a more round about method, doable, less accurate but more gratifying from a coding perspective.
My journey down this rabbit hole led me to almost doing this. http://vocamus.net/dave/?p=914 and here is some other interesting reading, https://bugzilla.mozilla.org/show_bug.cgi?id=532492. I got myself a copy of Minfield http://www.mozilla.org/projects/minefield/ and read up on how to build my own audio patched version with http://weblog.bocoup.com/javascript-fft-audio-sampling-in-firefox. Ok right. Still working on that one.
Needing more of a quick fix, I came up with two solutions. My first attempt at a solution was to build a Flash audio sampler that piped out the -1 to 1 floating point numbers to a file and use them in a JS array to manipulate coordinates of sprites on a Canvas. It worked quite well but the synchronization was off. I have not fixed this in that version but in the interim I got side tract and found another way to get some data. Quite simple really. Load up an mp3 into Audacity and go Analyze -> Time -> Beat Finder. Set the tolerance to about 55 and this will generate beat labels. Export those to a text file and then clean up the numbers to get an array of milliseconds for your JS setInterval();
Granted this is not spectrum data, but simpler beat info. In a way it works better for animating sprites because it’s cleaner. Spectrum data is very granular and works nice in widgets designed to show this, e.g. Graphs and Histogram visuals.
This test shows twitter searches on HTML5 Canvas and moves them around in time to the beat of the music loaded in an Audio tag. It’s not very exciting at this point but it’s got me thinking of some fun stuff to do. Every experiment like this is a step closer to moving away from flash. I still can’t settle on using Processing or Raphael though?
