Example : ActionScript 3 ComputeSpectrum

One of the cool new sound APIs in ActionScript 3, is the SoundMixer.computeSpectrum API. This allows you to get information about sounds currently playing within the player.

Andre Michelle put together a nice example that shows a visualization of the playing sound within the player. I tried to figure out the API from Andre Michelle’s example (some of it was over my head), but with some help from Grant Skinner at FITC, I finally figured it out and put together a simple example that shows how to use the API.


View the computeSpectrum Example (requires Flash Player 8.5 beta).Here is the code with comments.[code]package{import flash.display.Sprite;import flash.media.Sound;import flash.display.BitmapData;import flash.util.ByteArray;import flash.media.SoundMixer;import flash.events.Event;import flash.net.URLRequest;import flash.system.ApplicationDomain;public class SpectrumTest extends Sprite{private var bytes:ByteArray;private var CHANNEL_LENGTH:uint = 256;public function SpectrumTest(){var s:Sound = new Sound(new URLRequest(“Helicopter.mp3”));s.play();bytes = new ByteArray();addEventListener( Event.ENTER_FRAME, onEnterFrame );}private function onEnterFrame( event: Event ): void{SoundMixer.computeSpectrum(bytes, true, 0);var smooth:Number;var value:Number;graphics.clear();//place in middle of screenvar xVal:Number = (stage.stageHeight / 2);//evenly distributevar spacing:Number = (stage.stageWidth / CHANNEL_LENGTH);var color:Number;//first 256 is left channell, second 256 is right channellfor(var i:int = 0; i < CHANNEL_LENGTH; i++){//get the next bytevalue = bytes.readFloat();//normalize it to be a value between 0 and 256value = (value * CHANNEL_LENGTH) << 0;//figure out the color based on the valuecolor = 0xFF0000|(value << 8);graphics.lineStyle(1, color, 1);graphics.beginFill(color);//draw the circle, position based on width and spectrum position//radius scaled down to fit bettergraphics.drawCircle(i * spacing, xVal, value / 8);}}}}[/code]Really cool stuff that opens up a ton of posibilities within Flash.Update : 05/08/06 : I have added the example to the labs subversion repository, so you can always find the most up-to-date version here.

11 Responses to Example : ActionScript 3 ComputeSpectrum

  1. Keith Peters says:

    Yeah, that’s a rockin method. I did a similar one using BitmapData with setPixel. Way faster than the drawing API, and you can start doing all kinds of crazy effects with it.

  2. >I did a similar one using BitmapData with setPixel.Cool. Do you have a link to an example?mike chambersmesh@adobe.com

  3. Dreamer says:

    Good!I think you can make it more beautiful.

  4. A certain mister says:

    Very nice and easy to follow example, tnx !

  5. Here is another one working. Now, a few lines of code can do nice things.http://blog.andre-michelle.com/2006/as3-sound-radar

  6. Avi says:

    Is there anyway we can connect microphone to this computeSpectrum class?

  7. GregJ says:

    I’ve been using Flash & AS2 for quite awhile now, but am qa complete noob using Flex2 Builder & AS3. I’ve downloaded the ComputeSpectrum.as, and opened it in a project in Flex. But then what do I do with it?I tried putting it in a package, importing it to an mxml file and creating an instance of ComputeSpectrum.It seems to compile OK, and if I put the swf on a localhost server and open it in a browser, my mp3 plays but there is no display, and I get the error”TypeError: Error #1009: Cannot access a property or method of a null object reference.at SoundPackage::ComputeSpectrum/::onEnterFrame()”Can you point me in the right direction?

  8. cahlan says:

    I’m having the same problem as GregJ

  9. Vaibhav Pawar says:

    hi,We found an issue with FLASH 9 .i m useing the same above code but i got problem when loding and playing the mp3 songs. The last 10 to 15% portion of mp3 file is not getting loaded into memory/buffer.so that the song is not playing completly .Song is stopped before the end length(duration) of mp3. As a result Waveform is not generated completelyalso i am trying to use fallowing code :please help mpackage{import flash.display.Sprite;import flash.media.Sound;import flash.display.BitmapData;import flash.utils.ByteArray;import flash.media.SoundMixer;import flash.events.Event;import flash.net.URLRequest;import flash.system.ApplicationDomain;import flash.media.SoundChannel;import flash.events.*;public class Wave extends Sprite {private var bytes:ByteArray;private var CHANNEL_LENGTH:uint = 256;private var ch:SoundChannel;private var s:Sound = new Sound();private var url:String = “1.mp3”;private var osci:Sprite;//private const MP3_PATH:String = “Enter the path to your MP3”;public function Wave(){var request:URLRequest = new URLRequest(url);s.load(request);ch = s.play();osci=new Sprite();addChild(osci);s.addEventListener(Event.COMPLETE, completeHandler);s.addEventListener(Event.ID3, id3Handler);s.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);s.addEventListener(ProgressEvent.PROGRESS, progressHandler);bytes = new ByteArray();addEventListener( Event.ENTER_FRAME, spectrum );}//private function udpdateSpectrum(){private function spectrum( event: Event ): void {SoundMixer.computeSpectrum(bytes,true,1);trace(“SoundMixer.bufferTime : “+SoundMixer.bufferTime);trace (“s.length ;”+ s.length );trace(“paly :” + ch.position);osci.graphics.clear();osci.graphics.beginFill(0x123456);osci.graphics.moveTo(0,150);osci.graphics.lineTo(0,0);for(var i=0;i

  10. You can do this in Flash 9 by inserting the class into the document properties dialogue. Just make sure the .as file and .swf file and the mp3 are in the same directory.Here is an example of soundSpectrum in actionhttp://www.dhtmlnirvana.com/flash/spectrum/and the source files are here for people to use and play withhttp://www.dhtmlnirvana.com/flash/spectrum/flash_equalizer.zipYou should be able to tell how it all fits together by using Flash 9

  11. Rohit says:

    HiWorking great in flash 9 now. Thanks for the help.Cheers!Rohit