May
3
2010

How To Code A Full Functional MP3 Player Using ActionScript 3.0

An article by Kasun

Creating mp3 Player Body

Start Flash (I’m using flash CS3 and ActionScript 3.0) and create a new file any size you wish, just make it wide enough for 400px wide rectangle. Mine is the default size. In a new layer called body create a black rectangle with a black stroke that is 400px wide and 28px high, we will adjust the width later if necessary, and add the following style colors:

Please note the black and gray color positions this will give our rectangle a nice effect. Then use the gradient transform tool to rotate the gradient in the rectangle so that the highlighted area is on top similar to the image here:

When done convert it a symbol and give it a name of mcBody and make sure you selected Enables guide for 9-slice scaling. This will be handy for resizing the rectangle later.

Creating the Player Buttons

We want to make our file size as small as possible so we are going to create two backgrounds states for our buttons using one movie clip. First, we will create the normal state background and this similar to body background. So grab your rectangle tool and draw a small rectangle with 28px width and 18px height. Set the fill color gradient and stroke color gradient as shown.

Then rotate the gradient for the fill 90 degrees anti-clockwise and the opposite for the stroke to give this effect:

Then press F8 to convert the shape to a movie clip called mcButtonBg and enable the guide for 9-slice scaling. Delete the movie clip from the stage we will use later when adding more shapes to the buttons. The same movie clip will be used for the pressed state of the button by just rotating our movie clip.

Adding Play, Stop, Next, Prev, Pause buttons

First we will create a play shape and this is easily done with font of webdings and size 14px color #FF9933. Select the Text tool and write 4 and will get this shape:

Break it apart go to Modify > Break Apart then convert your new arrow to a movie clip symbol by pressing F8. Name the symbol mcArrow and this is the only movie we will use for almost all of our buttons. Cool ahh.

Erase the shape, don’t worry it is saved in the library for later use. Now create a line with the height of 8.3px and same orange color and convert it to a symbol named mcLine. Erase the symbol for the stage and now we create our buttons.

Press Ctrl + F8 and enter btnPlayfor the name, select Button and press enter. In the button edit mode, name the first layer bg and create another layer and call arrow.

While in the first layer and the up state bring the mcButtonBg to the stage then move your cursor to down state and press F6 now you will have the background duplicated. In the down state and using the transform tool flip the background 180 degrees this will create the illusion of pressed button when done.

In the arrow layer just place the mcArrow movie clip we created and duplicated in the down state as well and nudge it 6 or 10 pixels to the right. the final image should look something like this:

Now we have a complete play button and we will do exactly the same for the rest of the buttons. However, the shapes will be different.

Creating the other button will be a simple task achieved by duplicating our play button and adding more arrows and lines and sometimes rotating the shapes.

For example, to create the fast forward button we duplicate the btnPlay and name it btnFForward and in the editing mode we duplicate the arrow shape and end up with this:

The same can be done for the next button, but we will use btnFForward this time. So duplicate the btnFForward and call the new created symbol btnNextand and the mcLine to the two arrows as shown:

The previous and rewind buttons are just rotation of the next and fast forward we created, respectively.

The pause button is just a button with two mcLines instead of arrow as shown. The stop button is even simpler it is just a square shape that can be achieved by many means.

The final images you created should resemble the following:

Now we will just take the created buttons and place them where they belong on our earlier created background. But remember to place the buttons on separate layers and name the symbols accordingly. I named mine prev_mc, rewind_mc, stop_mc, pause_mc, play_mc, ffwrd_mc and next_mc. Your complete task should look something like this:

If you test the movie now you will be able to see that the buttons work perfectly and there is a nice effect of a pressed button on each one of them.

Information Screen

Create a new layer named info panel and select the rectangle tool and create a rectangle that is 140px wide and 18px high with fill color #FF9933 and black stroke. Select the fill only and convert it to a symbol and name it mcRectangle. Then select both the fill and stroke and convert the selected shape to a new movie clip symbol called mcInfoPanel. Double click mcInfoPanel and select the fill symbol and give it a dropshadow as shown:

Now go back to the main scene and align the info panel with the buttons and your mp3 player is complete and ready to be coded to become a full functional device. The circled area is left for the player spectrum which we will add during our coding stage.

In our next tutorial we take you through the coding phase and we will show how using actionscrip 3.0 the player will come to life. Thank you for following and hope you have enjoyed the learned from this tutorial. Please leave your comments if you find this learning experience good and even if you feel it wasn’t that good please leave your comments. We need to know where we get it right and where it isn’t. Thank you for your time.

Go to How to Code a Full Functional mp3 Player using ActionScript 3.0 to continue this tutorial for a complete code.

ActionScript-tuts, Featured, Flash-tuts,

Hi there, this is a continuation of our last tutorial where we designed the interface for an mp3 player using flash only. In case you missed the tutorial you can find it here.
Source files can be downloaded through the following link:

Demo can be viewed through the following link:

however, I did not include the mp3s [...]

//
//

Source files can be downloaded through the following link:

Demo can be viewed through the following link:

however, I did not include the mp3s in the file and you will need to make changes to the XML files to suite your tracks.

In this tutorial we will take you through the coding phase and show you how our design will be transformed to a full functional mp3 player. Let’s start.

Declaring Necessary Variables

Open the flash file created in our design mp3 tutorial and add a new layer called actions. Lock this layer and while in the first key frame press F9 to bring actionscript panel forward. We will start by declaring the variables that we are going to use in our script.

[cc lang="actionscript3"]

var track:Sound = new Sound;

var index:Number = 0;

var trackPos:Number = 0;

var trackOn:Boolean = false;

var trackXML:XML;

var trackList:XMLList;

var urlRequest:URLRequest;

var urlLoader:URLLoader;

var newTrack:Sound;

var newUrlRequest:URLRequest;

var chan:SoundChannel = new SoundChannel();

/* Rewind or FastForward rate */

const SEARCH_RATE:int = 1500;

/* XML file used to load the tracks */

const XML_FILE:String = “tracks.xml”;

[/cc]

First we create a new Sound object called track and then we initiate some variables that we will require to keep trail of the mp3 file that is being played. Then we define more variables that we will use in our code; these variables include the SoundChannel object.

For our mp3 player, we will be using an XML file to load our tracks. So create a simple xml file named tracks.xml and save it in the same place where your swf and fla files are located. This will be used to store the mp3 information such as track title, track performer, album…etc. mine looks like this. It is ok if yours is different as long as you know how to call the information appropriatley then you are fine, but I recommend you use the same structure to make sure everything works as described:

[cc lang="xml"]

Performer 1 your_1.mp3 Performer 2 your_2.mp3 Performer 3 your_3.mp3

[/cc]

now we need to be able to access the xml file but first we will load it and then check whether the loading action is complete so type the following after you variables declarations:

[cc lang="actionscript3"]

// create a new URLRequest object and use to reference the XML file

urlRequest = new URLRequest(XML_FILE);

// create a new URLLoader object to load the XML file

urlLoader = new URLLoader(urlRequest);

urlLoader.addEventListener(Event.COMPLETE, onceLoaded);

urlLoader.load(urlRequest);

[/cc]

Don’t test the movie yet if you do you will get an error because we didn’t create onceLoaded function yet, that’s our checking function. The function is added now

[cc lang="actionscript3"]

function onceLoaded(e:Event):void {

trackXML = new XML(e.target.data);

trackList = trackXML.track;

urlRequest = new URLRequest(trackList[index].path);

track.load(urlRequest);

}

[/cc]

This function checks to see if the xml file has completely loaded and then loads the information to our mp3 player.

Adding Functionality to Play Button

Using the instances of buttons created in the previous tutorial we add this to make the buttons respond to our clicking events, the first one is play button:

[cc lang="actionscript3"]

play_mc.addEventListener(MouseEvent.CLICK, playTrack);

[/cc]

Then add the playTrack function that will enable you to play the mp3 when the event of clicking play button as follows:

[cc lang="actionscript3"]

function playTrack(e:MouseEvent):void {

if (!trackOn) {

newUrlRequest = new URLRequest(trackXML.track[index].path);

newTrack = new Sound(newUrlRequest);

chan = newTrack.play(trackPos);

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);

trackOn = true;

}

[/cc]

Now you if you test the movie you will be able to hear your first track play when you click the play button. I’m excited already, you?

Adding Functionality to Stop Button

But what if we wanted to the sound to stop? This is where the stop button becomes handy and we do that by adding the following line of code after:

[cc lang="actionscript3"]

stop_mc.addEventListener(MouseEvent.CLICK, stopTrack);

ffunction stopTrack(e:MouseEvent):void {

if (trackOn) {

chan.stop();

trackPos = 0;

play_mc.addEventListener(MouseEvent.CLICK, playTrack);

trackOn = false;

play_mc.visible = true;

}

[/cc]

If you test the movie you should be able to play and then stop the sound as you wish. That wasn’t so bad wasn’t it!

Adding Functionality to Next Button

Now we want to enable our mp3 player to jump to another track, because the track we are listening to might be too boring or we are sick of it, after repeatedly listening to it while testing the movie. We do that by adding this code that targets the next button:

[cc lang="actionscript3"]

next_mc.addEventListener(MouseEvent.CLICK, nextTrack);

function nextTrack(e:MouseEvent):void {

if (index < trackList.length() – 1) {

index++;

}else{

index = 0;

}

chan.stop();

newUrlRequest = new URLRequest(trackList[index].path);

newTrack = new Sound(newUrlRequest);

chan = newTrack.play();

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);

trackOn = true;

track = newTrack;

}

[/cc]

Adding Functionality to Previous Button

Maybe we changed our minds and we want to go back to the same track so what do we do? we add the next lines of code to enable the previous button:

[cc lang="actionscript3"]

prev_mc.addEventListener(MouseEvent.CLICK, prevTrack);

function prevTrack(e:MouseEvent):void {

if (index > 0) {

index–;

}else{

index = trackList.length() – 1;

}

chan.stop();

newUrlRequest = new URLRequest(trackList[index].path);

newTrack = new Sound(newUrlRequest);

chan = newTrack.play();

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);

trackOn = true;

track = newTrack;

}

[/cc]

Adding Functionality to Pause Button

We also want to be able to pause tracks whenever we want. That’s achieved by adding the following code to our action panel;

[cc lang="actionscript3"]

pause_mc.addEventListener(MouseEvent.CLICK, pauseTrack);

function pauseTrack(e:MouseEvent):void {

if (trackOn) {

trackPos = chan.position;

chan.stop();

play_mc.visible = true;

play_mc.addEventListener(MouseEvent.CLICK, playTrack);

trackOn = false;

}

[/cc]

Adding Functionality to Fast-forward and Rewind Buttons

As it is, your player is already fully functional but we also want to add a fast-forward and rewind functionality to our player. We can add these features by adding the following lines of code in the actionscript panel. First the fast-forward functionality:

[cc lang="actionscript3"]

ffwrd_mc.addEventListener(MouseEvent.CLICK, ffwrdTrack);

function ffwrdTrack(e:MouseEvent):void {

if (trackOn){

trackPos = chan.position;

chan.stop();

chan = track.play(trackPos + SEARCH_RATE);

chan.addEventListener(Event.SOUND_COMPLETE, playNext);

}

[/cc]

and the code for enabling rewind functionality is as follows:

[cc lang="actionscript3"]

rewind_mc.addEventListener(MouseEvent.CLICK, rwndTrack);

function rwndTrack(e:MouseEvent):void {

if (trackOn) {

trackPos = chan.position;

chan.stop();

chan = track.play(trackPos – SEARCH_RATE);

}

[/cc]

It is important to add play next function to our fastforward button so that when the track reach the end next track starts, so make changes to ffwrdTrack function as shown by adding chan.addEventListener(Event.SOUND_COMPLETE, playNext); and add the following playNext function as well:

[cc lang="actionscript3"]

function ffwrdTrack(e:MouseEvent):void {

if (trackOn){

trackPos = chan.position;

chan.stop();

chan = track.play(trackPos + SEARCH_RATE);

chan.addEventListener(Event.SOUND_COMPLETE, playNext);

}

function playNext(e:Event):void {

if (index < trackList.length() – 1) {

index++;

}else{

index = 0;

}

chan.stop();

newUrlRequest = new URLRequest(trackList[index].path);

newTrack = new Sound(newUrlRequest);

chan = newTrack.play(0);

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);

trackOn = true;

track = newTrack;

chan.addEventListener(Event.SOUND_COMPLETE, playNext);

}

[/cc]

Displaying Track Information

In order to display track info we need to create some text areas so create two new layers named performer info and title info, respectively and grab the text tool and create two dynamic text areas with Arial type and 11 px. Call the first one performer_txt and second title_txt. This is crucial in order for the code to work properly. Keep each text area in its own layer.

We also need to add some coding to our function in order to display the text when the mp3 player starts playing or next and previous track is selected. Add the following code

[cc lang="actionscript3"]

title_txt.text = trackList[index].title;

performer_txt.text = trackList[index].performer;

[/cc]

where necessary in playTrack, nextTrack, prevTrack, and playNext functions. The complete code after re-arranging and adding is shown below:

[cc lang="actionscript3"]

var track:Sound = new Sound;

var index:Number = 0;

var trackPos:Number = 0;

var trackOn:Boolean = false;

var trackXML:XML;

var trackList:XMLList;

var urlRequest:URLRequest;

var urlLoader:URLLoader;

var newTrack:Sound;

var newUrlRequest:URLRequest;

var chan:SoundChannel = new SoundChannel();

//— Rewind or FastForward rate —\\

const SEARCH_RATE:int = 1500;

//— XML file used to load the tracks —\\

const XML_FILE:String = “tracks.xml”;

urlRequest = new URLRequest(XML_FILE);

urlLoader = new URLLoader(urlRequest);

urlLoader.addEventListener(Event.COMPLETE, onceLoaded);

urlLoader.load(urlRequest);

function onceLoaded(e:Event):void {

trackXML = new XML(e.target.data);

trackList = trackXML.track;

urlRequest = new URLRequest(trackList[index].path);

track.load(urlRequest);

}

play_mc.addEventListener(MouseEvent.CLICK, playTrack);

stop_mc.addEventListener(MouseEvent.CLICK, stopTrack);

next_mc.addEventListener(MouseEvent.CLICK, nextTrack);

prev_mc.addEventListener(MouseEvent.CLICK, prevTrack);

pause_mc.addEventListener(MouseEvent.CLICK, pauseTrack);

ffwrd_mc.addEventListener(MouseEvent.CLICK, ffwrdTrack);

rewind_mc.addEventListener(MouseEvent.CLICK, rwndTrack);

function playTrack(e:MouseEvent):void {

if (!trackOn) {

newUrlRequest = new URLRequest(trackXML.track[index].path);

newTrack = new Sound(newUrlRequest);

chan = newTrack.play(trackPos);

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);

trackOn = true;

title_txt.text = trackList[index].title;

performer_txt.text = trackList[index].performer;

}

function stopTrack(e:MouseEvent):void {

if (trackOn) {

chan.stop();

trackPos = 0;

play_mc.addEventListener(MouseEvent.CLICK, playTrack);

trackOn = false;

play_mc.visible = true;

}

function nextTrack(e:MouseEvent):void {

if (index < trackList.length() – 1) {

index++;

}else{

index = 0;

}

chan.stop();

newUrlRequest = new URLRequest(trackList[index].path);

newTrack = new Sound(newUrlRequest);

chan = newTrack.play();

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);

trackOn = true;

track = newTrack;

title_txt.text = trackList[index].title;

performer_txt.text = trackList[index].performer;

}

function prevTrack(e:MouseEvent):void {

if (index > 0) {

index–;

}else{

index = trackList.length() – 1;

}

chan.stop();

newUrlRequest = new URLRequest(trackList[index].path);

newTrack = new Sound(newUrlRequest);

chan = newTrack.play();

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);

trackOn = true;

track = newTrack;

title_txt.text = trackList[index].title;

performer_txt.text = trackList[index].performer;

}

function pauseTrack(e:MouseEvent):void {

if (trackOn) {

trackPos = chan.position;

chan.stop();

play_mc.visible = true;

play_mc.addEventListener(MouseEvent.CLICK, playTrack);

trackOn = false;

}

function ffwrdTrack(e:MouseEvent):void {

if (trackOn){

trackPos = chan.position;

chan.stop();

chan = track.play(trackPos + SEARCH_RATE);

chan.addEventListener(Event.SOUND_COMPLETE, playNext);

}

function rwndTrack(e:MouseEvent):void {

if (trackOn) {

trackPos = chan.position;

chan.stop();

chan = track.play(trackPos – SEARCH_RATE);

}

function playNext(e:Event):void {

if (index < trackList.length() – 1) {

index++;

}else{

index = 0;

}

chan.stop();

newUrlRequest = new URLRequest(trackList[index].path);

newTrack = new Sound(newUrlRequest);

chan = newTrack.play(0);

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);

trackOn = true;

track = newTrack;

chan.addEventListener(Event.SOUND_COMPLETE, playNext);

title_txt.text = trackList[index].title;

performer_txt.text = trackList[index].performer;

}

[/cc]

Adding Spectrum

Our last task is to create a spectrum ……

Create a new layer and call it spectrum then press F8 to create a new empty movie clip call it spectrum. In the editing mode of this newly created movie clip name the first layer rectangle and the second actions. Draw a rectangle 40px wide and 18px high that we’ll use as a guide, so right click the rectangle layer and select Guide. Now add the following code. This is taken from the help file modified a little bit to suite our mp3 player:

[cc lang="actionscript3"]

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(event:Event):void {

var bytes:ByteArray = new ByteArray();

const PLOT_HEIGHT:int = 9;

const CHANNEL_LENGTH:int = 20; //256;

SoundMixer.computeSpectrum(bytes, false, 0);

var g:Graphics = this.graphics;

g.clear();

g.lineStyle(0, 0xFF9933);

g.beginFill(0xFF9933);

g.moveTo(0, PLOT_HEIGHT);

var n:Number = 0;

for (var i:int = 0; i < CHANNEL_LENGTH; i++) {

n = (bytes.readFloat() * PLOT_HEIGHT);

g.lineTo(i * 2, PLOT_HEIGHT – n);

}

g.lineTo(CHANNEL_LENGTH * 2, PLOT_HEIGHT);

g.endFill();

g.lineStyle(0, 0xFF9933);

g.beginFill(0xFF9933, 0.5);

g.moveTo(CHANNEL_LENGTH * 2, PLOT_HEIGHT);

for (i = CHANNEL_LENGTH; i > 0; i–) {

n = (bytes.readFloat() * PLOT_HEIGHT);

g.lineTo(i * 2, PLOT_HEIGHT – n);

}

g.lineTo(0, PLOT_HEIGHT);

g.endFill();

}

[/cc]

Back in the main time line just position the empty movie clip where it should and your player should work perfectly. Let me know if you have problems. Later I will upload the files for downloads.

Tags: action scripts, Flash