Actionscript 3 – MP3 Player

June 17, 2011

It’s been years that I’ve wanted to play with actionscript 3, but haven’t really taken the jump yet, until today. I’ve always felt that for the most part, what ever I’ve wanted to do, I’ve been able to do it with other languages, for example, javascript or actionscript 2.

Well anyway, here’s an mp3 player, with vizualisation.

If you choose to use the swf file, sending in the filepath to the mp3 is by using the querystring “trackpath”. So that would be “mp3-player.swf?trackpath=mysupersong.mp3

Demo example

Source code (fla) and swf files: mp3-player

Source code (Actionscript 3)

// Import neccessary classes
import flash.media.SoundChannel;
import flash.geom.*
import flash.display.*

// Retrieve the filepath to the mp3
var trackpath:String = root.loaderInfo.parameters.trackpath;

// Load track from trackpath
var sound:Sound = new Sound(new URLRequest(trackpath));

// Create the soundchannel
var channel:SoundChannel = new SoundChannel();

// Start the sound,
channel = sound.play()

// Create the byte array
var soundwave:ByteArray = new ByteArray();

// Create array that'll cotaint the soundblocks
var blocks:Array = new Array();

// Add timer for the animation function animate
var interval:Timer = new Timer(50);

// Attach function to timer
interval.addEventListener(TimerEvent.TIMER, animate);
interval.start();

// Attach event for the play/pause function
stage.addEventListener(MouseEvent.CLICK, play_pause);

// Create the pause-track-related array
var track:Array = new Array();
track['paused'] = false;
track['position'] = 0;

// Set the default values for the stage
var stage_values:Array = new Array();
stage_values['height'] = Math.ceil(stage.height);
stage_values['width'] = Math.ceil(stage.width);

// Define the positions values that the blocks will later use
var positions:Array = new Array();
positions['x'] = 0;
positions['y'] = 0;

// Function for toggeling the sound

function play_pause( MouseEvent )
{
	if( !track['paused'] )
	{
		// Save current position before stopping the sound
		track['position'] = channel.position;
		track['paused'] = true;
		channel.stop();
	}
	else
	{
		track['paused'] = false;
		channel = sound.play( track['position'] );
	}
}

// Function that handles the block "animation"
function animate( e:Event ):void
{

	// Specifies the element width
	var elmwidth = 5;

	// n will be the counter for which block where working on
	var n:uint = 0;

	// Retrieve the spectrum from the soundmixer
	SoundMixer.computeSpectrum( soundwave );

	// We need 55 blocks if we want to fill up 550px worth of screen if each block is 10px wide.
	for( var i:uint = 0; i < ( stage_values['width'] / elmwidth ); i++ )
	{
		// Check if this block exists or not if it doesn't reutrn object, we'll create the sprite
		if( typeof( blocks[n] ) != 'object' )
		{
			blocks[n] = new Sprite();
			addChild( blocks[n] );
		}

		// Clean out any previous drawings in current block
		blocks[n].graphics.clear();

		// Set style definitions for the block
		blocks[n].graphics.lineStyle( 1, 0x999999 );
		blocks[n].graphics.beginFill( 0xcccccc );

		// Check if track is currently paused
		if( track['paused'] )
		{
			// if it is, then set the default x, y positions for the blocks
			positions['x'] = n * elmwidth;
			positions['y'] = 90;
		}
		else
		{
			// Set the default x position for the block
			positions['x'] = n * elmwidth;

			// Find out the current position of the sound wave
			positions['y'] = -soundwave.readFloat() * 100 + ( stage.height / 2 );
		}

		// Move to the blocks top-right corner
		blocks[n].graphics.moveTo( positions['x'], positions['y'] );

		// Begin the line on the blocks top-right corner
		blocks[n].graphics.lineTo( positions['x'], positions['y'] );

		// Draw line to the blocks top-left corner
		blocks[n].graphics.lineTo( positions['x'] + elmwidth, positions['y'] );

		// Draw line to the blocks bottom-left corner
		blocks[n].graphics.lineTo( positions['x'] + elmwidth, stage_values['height'] );

		// Draw line to the blocks bottom-right corner
		blocks[n].graphics.lineTo( positions['x'], stage_values['height'] );

		// End the rectangle where we began, top-right corener
		blocks[n].graphics.lineTo( positions['x'], positions['y'] );

		// Fill the rectangle
		blocks[n].graphics.endFill();

		// Add to the counter
		n++;
	}
}

Tags