Sound visualizer using SoundMixer

This time you'll get a complete class drawing a visualizer graph for the sound playing(or, actually the bytes in the sound). You can show the graph as a raw sound wave or as grouped by frequency(where a fourier transformation has been applied). This is just a simple demo, but you can separate out different frequencies to get some really cool effects. Play around with it and see what you get. PS: You do need to provide your own sound ;-)

package {
import flash.display.GradientType;
import flash.display.MovieClip;
import flash.events.Event;
import flash.media.Sound;
import flash.media.SoundMixer;
import flash.net.URLRequest;
import flash.utils.ByteArray;

[SWF(width='512',height='300',backgroundColor='0x000000',frameRate='30')]

public class SpectrumTest extends MovieClip{

private var _eql:Boolean = true;//Show as grouped by frequenzy
private var _completeGraph:Boolean = false;//Complete graph fill
private var _spikeAmp:uint = 100;//Amplifier for graph peaks
private var _graphFill:Array = new Array(0xFF0000, 0xFFDF21);//Colorfill for graph

private var _soundBytes:ByteArray;

public function SpectrumTest(){
var s:Sound = new Sound(new URLRequest("yoursoundfile.mp3"));
s.play(0, 3);
this._soundBytes = new ByteArray();
this.addEventListener(Event.ENTER_FRAME, drawGraphHandler);
}

private function drawGraphHandler(evt:Event):void{
graphics.clear();
graphics.clear();
graphics.beginGradientFill(GradientType.LINEAR, this._graphFill, [1,1],[0,255]);
graphics.moveTo(-1, 150);

//Get the bytes
SoundMixer.computeSpectrum(this._soundBytes,this._eql);

for(var i:uint=0; i<(stage.stageWidth * .5); i++){ 

var num:Number = -this._soundBytes.readFloat() * this._spikeAmp + stage.stageHeight * .5; 

graphics.lineTo(i*2, num); 

} 

if(this._completeGraph){ 

graphics.lineTo(512, 300); 

graphics.lineTo(0, 300); 

graphics.lineTo(-1, 150); 

} 

} 

} 

}

Quicktip: Actionscript 3 and number bases

"Oh my God, he's writing about numbers, how boooring!".. I bet you're thinking something like that right now, but hang on, this isn't really about numbers, it's about colors and all the cool things you can make em do.

So what does number bases has to do with colors? Well, in this exact moment you are looking at several colors, and at least two color models. The most commonly used on webpages, hexadecimal colors, like #FFFFFF or 0xffffff (in Flash/flex). In fact, hexadecimal means 16 based, as opposed to decimal or 10 based like we're used to (0-9). This is kinda good to know, because.. let's say you want your flash app to sample some colors from a picture and present the colors to a web-designer in a hexadecimal format.. how would you go about converting the premultiplied color value Flash gives you into an usable hex color?

Let's say you sample the color white, Flash gives you 16777215, completeley useless for a designer. Let's transform that value into a hex color in one line:

var myWhiteColor:uint = 16777215;

trace(myWhiteColor.toString(16));

And there you go, Flash spits out "ffffff". This happes because the toString method takes the radix or number base as a parameter and converts the passed number. To reverse the conversion you'd use parseInt("0xffffff"), that would give you the original premultiplied color value.