mike chambers | about

Example : ActionScript 3 ComputeSpectrum

Monday, April 24, 2006

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.

    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"));

            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;


            //place in middle of screen
            var xVal:Number = (stage.stageHeight / 2);

            //evenly distribute
            var spacing:Number = (stage.stageWidth / CHANNEL_LENGTH);

            var color:Number;

            //first 256 is left channell, second 256 is right channell
            for(var i:int = 0; i < CHANNEL_LENGTH; i++)
                //get the next byte
                value = bytes.readFloat();

                //normalize it to be a value between 0 and 256
                value = (value * CHANNEL_LENGTH) << 0;

                //figure out the color based on the value
                color = 0xFF0000|(value << 8);

                graphics.lineStyle(1, color, 1);


                //draw the circle, position based on width and spectrum position
                //radius scaled down to fit better
                graphics.drawCircle(i * spacing, xVal, value / 8);



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.

comments powered by Disqus
twitter github flickr behance rss