1. Code
  2. Media

Render an MP3 Audio Spectrum in Flash With computeSpectrum()


In this tutorial, I'll teach you how to create a visual representation of a sound file's audio spectrum, using Flash's SoundMixer.computeSpectrum method. We'll use four classes for this effect: Sound, SoundChannel, SoundMixer, and ByteArray. I'll explain each classes as we use them.

Final Result Preview

Let's take a look at the final result we will be working towards:

Click to view the demo

Step 1: Set Up Your Flash File

Launch Flash Pro and create a new Flash Document. Set the stage size to 500x300px, the background color to #000000, and the frame rate to 24fps.

Setup Stage

In your timeline, select the existing layer and rename it "Buttons". Then click Window > Common Libraries > Buttons.

Select your favorite button set, then drag and drop the 'Play' and 'Stop' buttons to the bottom-right corner of the stage.


Set the instance names of these buttons to play_btn and stop_btn, respectively.

Step 2: Create the Document Class

Create a new AS file, and save it as Add this code (read the comments for more details):

This code should be placed in our new Class:

You'll need to put an MP3 file called sound.mp3 in the same directory as your FLA's output directory. Any MP3 will do; on is included in the tutorial's source download.

Step 3: Document Class

Add the class name to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.

If you're not familiar with the concept of a document class,check out this Quick Tip before reading further.

Publish section

Then press Ctrl+Enter to test your Application.

Step 4: Handling the Sound Using Buttons

Let's add an instance of a new class: SoundChannel. This class is used to keep different sounds in separate audio channels; each channel is created by an instance of SoundChannel, and we use these instances to control the sounds.

As you can see, when Play is clicked, we don't just play the MP3, we also assign it to a SoundChannel. We can then control the playback through this SoundChannel instance later - in this case, by making it stop.

Step 5: Create Simple Animation

Now let's create some simple animation for this sound, again using the SoundChannel class.

The leftPeak and rightPeak properties of a SoundChannel instance correspond to the current amplitude of the sound, through the left and right channels. Think of it this way: if you have stereo speakers, then leftPeak is the volume of the sound coming out of the left speaker, and rightPeak is the volume of the sound coming out of the right speaker.

You can press Ctrl+Enter to test your application:

Sound Bar Animation

Step 6: What Is SoundMixer?

The SoundMixer class controls all embedded and streaming sounds in the application, for all SoundChannels at once.

It has three methods: areSoundsInaccessible(), which determines whether any sounds are inaccessible due to security reasons; stopAll(), which stops playback of all sounds; and computeSpectrum(), which is what we're interested in for this tutorial. The latter method takes a "snapshot" of the current sound, and pushes it into a ByteArray object.

Step 7: What Is ByteArray?

The ByteArray class provides methods and properties to optimize reading, writing, and working with binary data. It stores data as an array of bytes, hence its name. Find out more with this Introduction to ByteArray.

Step 8: More Complex Animation

So now let's create a more complex animation using the SoundMixer.computeSpectrum() method. Again, read the comments in the code to fully understand the behavior:

The most important parts of this code are lines 53 and 57. Here, the whole sound wave is translated to a ByteArray, which is then read, byte by byte, and translated into a set of numbers.

The ByteArray will be 512 floats long; in the for loop, we only read the first 256 floats, which correspond to the entire sound wave of the left channel (the sound coming through the left speaker).

Press Ctrl+Enter to test your Application.

Sound Line Animation

Step 9: Fill in the Gaps

We can fill in the area underneath the line to give us a different effect:

Complex Drawing Animation

All we need to do is draw a box and fill it in, using graphics methods. The code for this is as follows:

Step 10: Try Something Different

We can take this idea further, to add even more interesting and complex effects:

Complex Drawing Animation

In this case, we'll draw two spectra on top of each other, one for the left channel and one for the right. To achieve this, we'll use two for loops that each read in 256 floats, one after the other.


So we have learnt how to use the various Sound classes, and how to create beautiful sound drawing animations using SoundMixer.

Thank you for taking the time to read this article, because this is my first tutorial. If you have any questions, please leave them in a comment.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.