Page 1 of 6 A couple of weeks ago I was poking through the Adobe site seeing what's new and getting caught up. One article I read contained a reference to sound visualization in Flash and pointed me to a post by Peter deHaan of Adobe. I headed over to the page and sure enough, Peter had posted the code for a quick visualizer but there was no explanation of what it did. Being the curious sort, I copied and pasted the code into a Flash CS3 document, hooked it into an MP3 on my computer and it worked.
Again, not being content to just having something cool play on my screen, I wanted:
This article is a good example of how this business works. We tend to share what we have learned with each other and then we build on it. In this article I am going to do just that ... explain what Peter did and then start "riffing" on what he did.
In the meantime, a funny thing happened on the way to this article. Steve Schelter posted a Sound Visualization tutorial here at Community MX that covers a bit of the ground in this one. He presented an excellent overview of this topic. The thing is, I had already done this article and Steve's tutorial really cleared up a couple of issues for me. Again, this is another example of the way we learn this stuff. We "riff" on what we know and make some mistakes along the way as we become comfortable with a concept. Once we understand what we are doing, articles like Steve's give us an even deeper knowledge of the concept. Educators have a fancy term for this approach to learning: "Scaffolding". Simply put each piece of knowledge builds upon the previous piece. In either case, this article should help those of you who read Steve's article and wondered "Huh?" to understand what he was saying. For those of you that did understand, this piece should give you some ideas as to how you can "riff" on his piece.
Peter deHaan's original code simply started the audio playing as soon as the SWF loaded. This would have created a rather noisy tutorial. I changed it to include the two buttons which control the audio.
About a year ago, when Flash CS3 was still in beta and Adobe had released ActionScript 3.0 as a public beta through Adobe labs, Peter deHaan posted a small chunk of code to his blog that was nothing more than a "doodle". He had become interested in the new SoundMixer.computeSpectrum() method of ActionScript 3.0 and decided to see what it could do. The code he posted was:
var url:String = "http://www.helpexamples.com/flash/sound/song3.mp3";
var request:URLRequest = new URLRequest(url);
var s:Sound = new Sound();
s.addEventListener(Event.COMPLETE, completeHandler);
s.load(request); var song:SoundChannel = s.play();
song.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
var ba:ByteArray = new ByteArray();
var gr:Sprite = new Sprite();
gr.x = 20;
gr.y = 200;
addChild(gr);
var time:Timer = new Timer(50);
time.addEventListener(TimerEvent.TIMER, timerHandler);
time.start();
function completeHandler(event:Event):void {
event.target.play();
}
function soundCompleteHandler(event:Event):void {
time.stop();
}
function timerHandler(event:TimerEvent):void {
SoundMixer.computeSpectrum(ba, true);
var i:int;
gr.graphics.clear();
gr.graphics.lineStyle(0, 0xFF0000);
gr.graphics.beginFill(0xFF0000);
gr.graphics.moveTo(0, 0);
var w:int = 2;
for (i=0; i<512; i+=w) {
var t:Number = ba.readFloat();
var n:Number = (t * 100);
gr.graphics.drawRect(i, 0, w, -n);
}
}
If you were like me, and new to ActionScript 3.0, you would have looked at the code and thought, "Huh?"
Being the curious sort (as I said), I wanted to see what it did. I opened a new Flash Professional CS3 document, copied the code and pasted it into the ActionScript editor. To see what the code does, click the Start Song button in the SWF:
I was floored. That red line was bumping up and down following the audio amplitude. Naturally my curiosity was piqued and I wanted to know why the line worked the way it id. Obviously it had something to do with the SoundMixer.computeSpectrum(ba, true); but I didn't have a clue what that was.
The answer was found in the ActionScript 3.0 Help docs. Turns out SoundMixer is a class of its own and the computeSpectrum() method takes a snapshot of the sound wave and places it in a ByteArray (ba) object. Clear as mud.
Turns out the ByteArray is a series of numbers between -1 and 1. The object can have 512 values. The first 256 values represent the left audio channel and the remaining 256 values represented the right channel. As I studied the Help document I realized those numbers were what gave the graph its motion. High frequencies were on the right side of the graph and the low frequencies were on the left side. It also became obvious that the spikes were strictly a function of the values in that array.
If you look at the timerHandler function, it becomes clear the spikes are drawn using the Drawing API in Flash. I knew how to use it to draw a line in ActionScript 2.0, so this was familiar territory. Now that I had a rudimentary grasp of what was going on I was ready to start playing with it.
Keywords
Flash, Flash CS3, Flash Professional CS3, Audio, Audio Visualization
