andyMatthews.net
Building a Badass Waveform Visualizer with Adobe AIR and the Canvas Tag
To build on yesterday's post about Canvas support in Adobe AIR, today's post is going to show the code needed to build a "Badass Waveform Visualizer with Adobe AIR and the Canvas Tag". I put it in quotes because it's that badass. Too many times, the Flash and Flex guys get all the cool AIR stuff. Well us HTML/JS guys are taking it back! You can download the entire source code, which includes the compiled AIR app. Let's look at the code.
Essentially what this code is doing is getting the system's default microphone, then firing off the air.SampleDataEvent.SAMPLE_DATA event. This sends a ByteArray data stream containing a series of floating point numbers between -1 and 1 to the drawEQ method. The drawEQ method then takes those data points and, using the Canvas tag, displays them visually to the users.
I've got this version coded as white strokes on a black background. If you want to spice things up a little bit, we can use random RGB values by taking the following steps:
- Find var micData = e.data; in the drawEQ function and add this line after it var rint = Math.round(0xffffff * Math.random());
- In the same function, comment out, or delete, c.strokeStyle = 'rgb(255,255,255)'; and replaec it with this line c.strokeStyle = 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
This app was a combination of Ray Camden's post on Microphone support in Adobe AIR, Fumio Nonaka's post on displaying audio waveforms, and my own research into the Canvas tag. What awesome things are you doing with the Canvas tag whether in AIR or not?