Peter deHaan

Note: This example was built using the "Flash Professional 9 ActionScript 3.0 Preview" (http://labs.adobe.com/technologies/flash9as3preview/).

I'll try and modify the example soon and port the code to an external ActionScript file so it can be used as an ActionScript Project in Flex Builder 2, or as a Document class in the Flash Preview.

This is great. I took the code and loaded my own mp3. I'm trying to set the defaul volume. It seems like it has been moved to the SoundTransform class, but I can get it to work. Any ideas?

I really like the above script. I'm really into Sound and excited about the possibilites with Flash Player 9. I revised to code and placed it into a package. I also added volume, (figured it out) and also added some other things.
---------
package{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.*;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundMixer;
import flash.media.SoundTransform;
import flash.net.URLRequest;
import flash.utils.Timer;
import flash.geom.Matrix;
import flash.utils.ByteArray;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;

public class SoundSpectrum extends Sprite{
private var url:String = "elsewhere.mp3";
private var soundFactory:Sound;
private var channel:SoundChannel;
private var gr:Sprite
private var time:Timer;
private var ba:ByteArray = new ByteArray();
private var positionTimer:Timer;
private var myText:TextField;

public function SoundSpectrum(){

myText = new TextField();
myText.autoSize = TextFieldAutoSize.LEFT;

var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0xFF0000;
format.size = 10;

myText.defaultTextFormat = format;
addChild(myText);

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

var request:URLRequest = new URLRequest(url);
soundFactory = new Sound();
soundFactory.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
soundFactory.load(request);
channel = soundFactory.play();
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
gr = new Sprite();
gr.x = 20;
gr.y = 400;
addChild(gr);
time = new Timer(50);
time.addEventListener(TimerEvent.TIMER, timerHandler);
time.start();
}

private function ioErrorHandler(event:Event):void {
trace("ioErrorHandler: " + event);
}

private function setVolume(volume:Number):void {
var transform:SoundTransform = channel.soundTransform;
transform.volume = volume;
channel.soundTransform = transform;
}

private function mouseMoveHandler(event:MouseEvent):void {
var yPos:uint = event.stageY;
var volume:Number = 1 - (yPos / stage.stageHeight);
myText.text = "Volume: " + Math.round(volume * 100);
setVolume(volume);
}

private function timerHandler(event:TimerEvent):void {
SoundMixer.computeSpectrum(ba,true);
var fillType:String = "linear";
var colors:Array = [0xFF3300, 0xFFFF00,0x009900];
var alphas:Array = [1, 1, 1];
var ratios:Array = [0, 125, 255];
var matr:Matrix = new Matrix();
matr.createGradientBox(600, 600, 0, 0, 0);
var spreadMethod:String = "PAD";
var i:int;
gr.graphics.clear();
gr.graphics.lineStyle(.5, 0x000000,1,false,"normal","round","miter",8);
gr.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
gr.graphics.moveTo(0, 0);
var w:uint = 10;
for (i=0; i var t:Number = ba.readFloat();
var n:Number = (t * 300);
gr.graphics.drawRect(i, 0, w, -n);
}
}

}
}

Hey, thanks for this example! I used the code to get started and was able to have lots of fun with the sound spectrum!

Lour Barber, I'm not sure about your code tho, I dont know anything about packages. is that for flash 9 alpha? o_O

COOOOOL!

You should see it rendering Alanis Morissette's 21 things I want in a lover :D

Thanks a lot, Peter ;)

Lou,

An alternative to your setVolume method.

private function setVolume(volume:Number):void {
var transform:SoundTransform = new SoundTransForm(volume)
channel.soundTransform = transform;
}

dont need to get the sound trans form object from the channel first. You can pass the volume to the constructor of the soun transform object. (though thinking about it this does mean creating another object which has an overhead)

Typo in last for loop ?...

Hello,

This might sound pretty stupid, but can anybody put here a sample on own to load the package into a Flash AS3 file?

Thank you very much in advance and congrats for the excellent demo!

Regards,

Adam.

Nice, can you tell me how I would get the bars to play downwards?

Never mind :P

var n:Number = (t * -200);

I have explored the ComputeSpectrum in the below link
http://www.esnips.com/web/TheF3

WoW It is great

I am a beginner
I Understood so simply

Thank You very much

Another great article by Tom Green can be found over at Community MX: http://www.communitymx.com/content/article.cfm?cid=8E9A0

A great article and definitely worth the read.

This is awesome. I have one question though. I am really new to scripting. I used SoundMixer.computeSpectrum and it works fine. Question is this that If i create any graphics or Movie clip etc. It hides the sound spectrum(etc).
What can we do to bring it forward and send all the rest, graphic anim etc in the back ?

Thanks for the post!

From what I surmise, the readFloat() method keeps an internal counter and just gets the next value in the byte array each time you call it.

If your stretch factor (third parameter in the computeSpectrum) is 0 (the default) and your FFTMode is true to turn on the frequency analysis then you have 256 numbers in your bit array representing the frequency analysis for the left channel followed by 256 numbers representing the frequency analysis for the right channel.

--- aside
I think that if your stretch factor is set to 1 then you only get 128 numbers for your left and 128 for your right - and then 56 for each channel if your factor is 2, etc. so watch that! I could be wrong though ;-) (If I am right, then this is a little counter-intuitive!)
--- /aside

When you set w=2 for your loop, you are actually just getting the first 256 numbers in the byte array and thus really just getting the frequency for the left channel - which is probably adequate as most people will not notice.

BUT... if you set w=10 thinking that you are just making fatter bars that average over the expected frequencies (like in that longer example) then you are only getting the first 51 or so (512/10) entries in the bitmap array which is really only the bass frequencies for the left channel. That is why your output looks too bass sloped and no longer has the same distribution!

So a better solution would be to readFloat() for every iteration of the 512 bitmap array and average the first channel's 256 elements with the second channel's 256 elements. And if you want fatter bars then use a modulus to display the data only so often like below. Now you can safely use w to get fatter bars and keep the distribution. Just watch... if you use a stretch factor you will have to change the 256 in this loop (I think - see the aside above).

var w:uint = 5;

// array to store the first channel's frequencies

var temp:Array = [];

for (var i=0; i
	temp[i] = ba.readFloat();

}

for (i=0; i
	var t:Number = ba.readFloat();

	if (i%w == 0) {		

		var n:Number = ((temp[i] + t) / 2 * 300);

		gr.graphics.drawRect(i, 0, w, -n);

	}

}	

// where 300 is the magnification number

Also, the timer does not pick up all the beats with its 50 ms delay. You might want to just process it as fast as possible and that is the frame rate so use an onEnterFrame. (Timers and intervals can only fire at the nearest framerate anyway). The onEnterFrame worked better for me:

In your constructor you could add this and get rid of your timer stuff:

addEventListener(Event.ENTER_FRAME, processFrequency);

Then adjust your old timer method to be called this - note the different dataType for the parameter of just Event:

private function processFrequency(event:Event):void {

Sorry... just realized that the code does not average over the w frequencies so here is a fix that will do that:

var w:uint = 20;

var t:Number = 0;

var temp:Array = [];

for (var i=0; i<256; i++) {

	t += baa.readFloat();

	if (i%w == 0) {					

		temp[i] = t / w;

		t = 0;

	}

}

for (i=0; i<256; i++) {

	t += baa.readFloat();

	if (i%w == 0) {					

		var n:Number = ((temp[i] + t/w) / 2 * 300);

		t = 0;

		gr.graphics.drawRect(i, 0, w, -n);

	}

}	

Dan Zen,

Thanks for the great comments/corrections/improvements. Yeah, I haven't played too closely with the computeSpectrum() method, and I threw this example together [too] quickly, but it definitely looks like my example could use a bit of "improvement".

Peter

Would you know how to use computespectrum to generate an image that represents the whole waveform of the mp3, like what you see if you open up a music file in an audio editor?

I have been trying to create a visualization of an mp3, prior to playing the sound so that I can use the graphics in an editor. I have been attempting to pre-process the sample by repeatedly playing the sound from different positions and sampling the leftPeak with no success. Any ideas?