Music visualizers in Flash using AS3 and computeSpectrum

Standard

Music visualizers really are great, all those colours and patterns you see generated by the music in media players like iTunes are nice to watch, and with AS3 it turns out that it’s actually fairly simple to make something similar in Flash. That’s great because it offers a cool way to learn more about ActionScript graphics programming, the drawing API, Filters and the BitmapData class.

To get the sound spectrum data from the currently playing sound it’s just a matter of passing a ByteArray to SoundMixer.computeSpectrum on each frame, then looping through it and using the values you get to draw some nice stuff on the screen. Combine that with some user input and you can make some pretty amazing lightshows with just a few lines of code.

Here’s the basics of how to get the sound spectrum data:

var sound:Sound = new Sound();
sound.load('music.mp3');
var soundchannel:SoundChannel = sound.play();
addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event)
{
    var bytes:ByteArray = new ByteArray();
    SoundMixer.computeSpectrum(bytes);
    for(var i:int=0; i<512; i++)
    {
        var value:Number = bytes.readFloat();
        //now use 'value' as the basis for
        //drawing your graphics to the stage
    }
}

The demos below are mainly based on an example by Todd Yard from his excellent book on AS3 Image Effects. I’ve added in some extra BitmapData effects filters and after trails but the main structure is quite similar. A few other posts I found useful while reading up on this subject included this one by Grant Skinner, this one on Antti Kupila’s Blog and a Papervision3D version by John Lindquist. It’s also worth checking out the Adobe live docs for the SoundMixer Class as there is some useful info and examples on there as well.

Also if your interested in audio visualizers in general, then the Lightsynths on the Llamasoft website are definitely worth a look, Llamasoft is the creator of the Xbox 360 music visualizer and Atari Jaguar classic Tempest 2000.

Anyway, below are some screen grabs of the demos I made plus links to the demos and source code too. The music used was just something quick I put together using the fantastic Hobnox AudioTool and it’s ToneMatrix setup.

Demo 1

sound-demo1

Click here to see the demo and download the source.

Demo 2

sound-demo2

Click here to see the demo and download the source.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s