Create a AS3 / Flash 9 MP3 Player with spectrum display

In this tutorial, we’re going to build a Flash mp3 player with a spectrum analyzer written in AS3. We’ll focus on the spectrum analyzer and build just the basic functionality for the player itself.

Actionscript 3 has a new class called SoundMixer which gives you global sound control in the SWF file. It comes with the computeSpectrum method that takes a snapshot of the current sound wave and places it into the specified ByteArray object. The values are formatted as floating-point values, in the range -1.0 to 1.0. There are in total 512 values. Half of them for the right and left channel.

With these values you can easily create a visual spectrum. Let’s take a closer look at our renderSpectrum function, which is automatically called, when Flash enters a new frame.

First of all, we set a reference to the spectrum graphics:

function renderSpectrum(e:Event):void
{
var g:Graphics = this.mcMp3Player.spectrum.graphics;

Next, we compute the spectrum in the byte array “sndBytes”:

SoundMixer.computeSpectrum(sndBytes);

And then comes the most important part, visualizing the spectrum that is. We clear all the graphics and set a new line style and fill and move our drawing pointer to the middle left position.

Next, we create a number “n” which will contain the multiplied number from the maximum height of the spectrum and the current float number.

To create the curves, we iterate 256 times (which represents the left channel values) and read the current  float numbers from the byte array. Note that reading a value from a byte array will automatically set the pointer position to the next value.

As mentioned before, we multiply the float number with the maximum height and set it to “n”. In our case the value will be between 75 and -75 depending on what values we get from the byte array. To draw the line we use “i * 2″ for the x-coordinate and “SPECTRUM_HEIGHT – n” for the y-coordinate. This will result in a nice wave shape. We only need to set the end point for the line and end the fill instruction.

For the right channel it’s the same procedure, except that we take the last 256 values from the byte array.

g.clear();
g.lineStyle(0, SPECTRUM_LEFT_LINE_COLOR);
g.beginFill(SPECTRUM_LEFT_FILL_COLOR, SPECTRUM_LEFT_FILL_ALPHA);
g.moveTo(0, SPECTRUM_HEIGHT);
var n:Number = 0;
for (var i:int = 0; i < CHANNEL_LENGTH; i++) {
n = (sndBytes.readFloat() * SPECTRUM_HEIGHT);
g.lineTo(i * 2, SPECTRUM_HEIGHT - n);
}
g.lineTo(CHANNEL_LENGTH * 2, SPECTRUM_HEIGHT);
g.endFill();

As you can see, it’s very easy to create a nice little spectrum. There are many other amazing spectrum analyzer out there which you should check out.

Here is the full code of this mp3 player, with the constants and vars, where you set the animation parameters:

// spectrum constants
const SPECTRUM_HEIGHT:int                 = 75;
const CHANNEL_LENGTH:int                 = 256;
const SPECTRUM_LEFT_FILL_COLOR:uint        = 0x5FDEFE;
const SPECTRUM_LEFT_FILL_ALPHA:Number    = 0.5;
const SPECTRUM_LEFT_LINE_COLOR:uint        = 0x013643;
const SPECTRUM_RIGHT_FILL_COLOR:uint    = 0xBFF075;
const SPECTRUM_RIGHT_FILL_ALPHA:Number    = 0.5;
const SPECTRUM_RIGHT_LINE_COLOR:uint    = 0x4A730D;
// vars
var sndObject:Sound                = new Sound();
var chaObject:SoundChannel        = new SoundChannel() ;
var sndTransform:SoundTransform    = new SoundTransform();
var reqObject:URLRequest         = new URLRequest("so-deep.ram2000.mp3");
var sndBytes:ByteArray            = new ByteArray();
var intPosition:int             = 0;
var bolStop:Boolean                = true;
function initMP3Player():void {
// set event listeners
addEventListener(Event.ENTER_FRAME, renderSpectrum);
addEventListener(Event.ENTER_FRAME, calcProgress);
this.mcMp3Player.btnStop.addEventListener(MouseEvent.CLICK, stopPlayback);
this.mcMp3Player.btnPause.addEventListener(MouseEvent.CLICK, pausePlayback);
this.mcMp3Player.btnPlay.addEventListener(MouseEvent.CLICK, startPlayback);
this.mcMp3Player.btnMute.addEventListener(MouseEvent.CLICK, mutePlayback);
this.mcMp3Player.btnUnmute.addEventListener(MouseEvent.CLICK, unmutePlayback);
this.mcMp3Player.progress.addEventListener(MouseEvent.CLICK, setNewProgress);
// use hand cursor for progress bar
this.mcMp3Player.progress.buttonMode = true;
this.mcMp3Player.btnPause.visible    = false;
this.mcMp3Player.btnUnmute.visible    = false;
}
function stopPlayback(e:MouseEvent):void {
chaObject.stop();
sndObject = new Sound();
bolStop = true;
intPosition = 0;
this.mcMp3Player.btnPlay.visible    = true;
this.mcMp3Player.btnPause.visible    = false;
}
function pausePlayback(e:MouseEvent):void {
this.mcMp3Player.btnPlay.visible    = true;
this.mcMp3Player.btnPause.visible    = false;
playSound(false);
}
function startPlayback(e:MouseEvent):void {
this.mcMp3Player.btnPlay.visible    = false;
this.mcMp3Player.btnPause.visible    = true;
playSound();
}
function mutePlayback(e:MouseEvent):void {
this.mcMp3Player.btnMute.visible    = false;
this.mcMp3Player.btnUnmute.visible    = true;
setVolume(0);
}
function unmutePlayback(e:MouseEvent):void {
this.mcMp3Player.btnMute.visible    = true;
this.mcMp3Player.btnUnmute.visible    = false;
setVolume(1);
}
function setNewProgress(e:MouseEvent):void {
var p:int = sndObject.length * e.currentTarget.mouseX / 220;
chaObject.stop();
chaObject = sndObject.play(p);
this.mcMp3Player.btnPlay.visible    = false;
this.mcMp3Player.btnPause.visible    = true;
}
function playSound(bolPlay:Boolean = true):void {
if(bolPlay) {
if(bolStop) {
// load mp3 file if playback has been stopped
sndObject.load(reqObject);
bolStop = false;
} else {
intPosition = chaObject.position;
}
chaObject = sndObject.play(intPosition);
} else {
chaObject.stop();
}
}
function setVolume(intVolume:int = 1):void {
sndTransform.volume = intVolume;
chaObject.soundTransform = sndTransform;
}
function calcProgress(e:Event):void {
var p:MovieClip = this.mcMp3Player.progress.mcProgressFill;
var w:int        = Math.round( 220 * chaObject.position / sndObject.length);
p.width         = w;
}
function renderSpectrum(e:Event):void
{
// set a reference to the spectrum graphics
var g:Graphics = this.mcMp3Player.spectrum.graphics;
// compute spectrum in byte array sndBytes
SoundMixer.computeSpectrum(sndBytes);
/*
*    LEFT CHANNEL
*/
g.clear();
g.lineStyle(0, SPECTRUM_LEFT_LINE_COLOR);
g.beginFill(SPECTRUM_LEFT_FILL_COLOR, SPECTRUM_LEFT_FILL_ALPHA);
g.moveTo(0, SPECTRUM_HEIGHT);
var n:Number = 0;
for (var i:int = 0; i < CHANNEL_LENGTH; i++) {
n = (sndBytes.readFloat() * SPECTRUM_HEIGHT);
g.lineTo(i * 2, SPECTRUM_HEIGHT - n);
}
g.lineTo(CHANNEL_LENGTH * 2, SPECTRUM_HEIGHT);

g.endFill();
/*
*    RIGHT CHANNEL
*/
g.lineStyle(0, SPECTRUM_RIGHT_LINE_COLOR);
g.beginFill(SPECTRUM_RIGHT_FILL_COLOR, SPECTRUM_RIGHT_FILL_ALPHA);
g.moveTo(CHANNEL_LENGTH * 2, SPECTRUM_HEIGHT);
for (i = CHANNEL_LENGTH; i > 0; i--) {
n = (sndBytes.readFloat() * SPECTRUM_HEIGHT);
g.lineTo(i * 2, SPECTRUM_HEIGHT - n);
}
g.lineTo(0, SPECTRUM_HEIGHT);
g.endFill();
}
initMP3Player();

So, we’ve already reached the end of our lesson and we hope, that you enjoyed it!

Be sure to check back soon as we’ll take the spectrum analyzer to 3d!

Download Support files