Skip to content


[AS 3] SoundMixer.computeSpectrum For Sound Spectrum Analyzer

I wanted to continue on with creating visuals for audio files and discovered the SoundMixer.computSpectrum class that will help in generating a full Spectrum Analyzer. I will post my .swf on another page as there aren’t any music playback controls in the movie.

View the demo here.

Here is the code for the bar:

package
{
	import flash.display.Sprite;
	public class SpectrumBar extends Sprite
	{
		private var xPos:Number;
		private var yPos:Number;
		private var rWidth:Number;
		private var rHeight:Number;
		private var color:uint;

		public function SpectrumBar(xPos:Number=0,yPos:Number=0,rWidth:Number=10,rHeight:Number=10,color:uint=0x336699)
		{
			this.graphics.beginFill(color);
			this.graphics.drawRect(xPos,yPos,rWidth,rHeight);
			this.graphics.endFill();
		}
	}
}

Here is the document class:

package
{
	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.filters.BlurFilter;

	// resource: http://www.mikechambers.com/blog/2006/04/24/example-actionscript-3-computespectrum/

	public class SoundVisualizer extends Sprite
	{
		private var bytes:ByteArray;
		private var CHANNEL_LENGTH:uint = 256;

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

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

		private var barsArr:Array;
		var bar:SpectrumBar;

		public function SoundVisualizer()
		{
			var s:Sound = new Sound(new URLRequest("/path/to/music/file.mp3"));

			s.play();

			bytes = new ByteArray();
			barsArr = new Array();

			for(var ct:uint = 0; ct < CHANNEL_LENGTH; ct++)
            {
				var bar:SpectrumBar = new SpectrumBar(ct * spacing,xVal-1,spacing,stage.stageHeight, Math.random() * 0xffffff);
				barsArr.push(bar);
				addChild(bar);
            }

			addEventListener( Event.ENTER_FRAME, onEnterFrame );
		}

		private function onEnterFrame( event: Event ): void
		{
			SoundMixer.computeSpectrum(bytes, true, 0);

			var smooth:Number;
			var value:Number;

			graphics.clear();

			var color:Number;

			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);
				color = Math.random() * 0xffffff;

				var bar:SpectrumBar = barsArr[i]; 

				var SpectrumChange:Number = (value/8) * -4;
				sizeBar(bar,SpectrumChange);
			}
		}

		private function sizeBar(bar:SpectrumBar, SpectrumChange:Number)
		{
			bar.y = SpectrumChange;
		}
	}
}

Posted in Actionscript 3, Audio.


7 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. rodrigot says

    Demo is down.
    but thanks anyway.

  2. admin says

    should be on, thanks for the heads up!

  3. rodrigot says

    nope, it says
    SecurityError: Error #2121: Security sandbox violation: SoundMixer.computeSpectrum: http://manewc.com/projects/flash/SoundVisualizer/SoundVisualizer.swf cannot access http://www.millaextra.com/swf/main.swf. This may be worked around by calling Security.allowDomain.
    at flash.media::SoundMixer$/computeSpectrum()
    at SoundVisualizer/onEnterFrame()

  4. bob says

    Yes, got a security sanbox violation here…

  5. Danny Miller says

    http://bugs.adobe.com/jira/browse/FP-147
    vote for it to be fixed

  6. Rick says

    I voted for the SecDom issue. But, I have a different problem that perhaps you’ve encountered. On one of my PCs, Firefox will not display visualizations the depend on computeSpectrum. My other PC with the same OS, Flash Player and Firefox versions plays them just fine. This has been true over several versions of FF and Flash player. Do you have any ideas? If you do, please reply via email.

Continuing the Discussion

  1. computeSpectrum() Roundup! | DestroyYourComputer.com | Blog - Interactive Design Agency linked to this post on September 18, 2009

    [...] SoundMixer.computeSpectrum() For Sound Spectrum Analyzer [...]



Some HTML is OK

or, reply to this post via trackback.