Step 2 - The Code 

Alright now we're almost done!

Here is what my code looks like at the moment..

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel width="236" height="200" layout="absolute" title="MP3 Player" verticalCenter="0" horizontalCenter="2.5">

<mx:ComboBox left="10" top="10" id="cbxMusic"></mx:ComboBox>

<mx:Button label="Stop" left="10" verticalCenter="-29"/>

<mx:Button x="70" y="40" label="Play"/>

<mx:Button x="129" y="40" label="Pause"/>

<mx:Button label="Previous Song" verticalCenter="1" left="10"/>

<mx:Button x="125" y="70" label="Next Song"/>

</mx:Panel>

</mx:Application>

Now lets begin coding the player. Instead of writing all the code in our main document (main.mxml), I created a separate document (File -> New -> ActionScript File) and wrote all the functions there.

Here is my main.mxml :

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="songService.send()">

<mx:Script source="functions.as" />

<mx:HTTPService id="songService" showBusyCursor="true" result="initApp()" url="songList.xml" />

<mx:Panel width="236" height="200" layout="absolute" title="MP3 Player" verticalCenter="0" horizontalCenter="0">

<mx:ComboBox left="10" top="10" id="cbxMusic" change="aMusic.setSong(cbxMusic.selectedItem.data);" />

<mx:Button label="Stop" left="10" verticalCenter="-29" click="aMusic.onStop()"/>

<mx:Button x="70" y="40" label="Play" click="aMusic.onPlay()"/>

<mx:Button x="129" y="40" label="Pause" click="aMusic.onPause()"/>

<mx:Button label="Previous Song" verticalCenter="1" left="10" click="aMusic.cyclesongArray('rev',cbxMusic)"/>

<mx:Button x="125" y="70" label="Next Song" click="aMusic.cyclesongArray('forw',cbxMusic)"/>

</mx:Panel>



</mx:Application>

Pretty much the same as before. If you notice I've added a creationComplete statement to the main application tag. All this does is tell the file to execute a function as soon as it's done loading.

In this case, we're telling it to start the http service. The http service will fetch the list of songs from an XML file, and fill up our combo box.

I'll explain the rest later. You'll need to see our ActionScript file before you'll understand anything else.

My ActionScript functions file :

// ActionScript file

import audioManager;

public var aMusic:audioManager = new audioManager;

private var dp:Object;

private function initApp():void

{

if (songService.lastResult.song!=undefined) {

var aryTemp:Array = new Array();

for (var i:Number=0; i<songService.lastResult.song.length; i++) {

aryTemp.push({value: songService.lastResult.song[i].name, label: songService.lastResult.song[i].name, data: songService.lastResult.song[i].data});

}

dp = aryTemp;

cbxMusic.dataProvider = dp;                

}

}

 It's actually quite simple. The first thing we do is import the audioManager ActionScript class (audioManager.as). This tells the script to import all the functions and whatnot from that file.

"public var aMusic:audioManager = new audioManager;" simply tells the script to assign the audioManager class to the var aMusic.

Same goes for the var "dp" (short for data provider), except that dp is an object. We'll be using that later on...

Now, finally, comes our function initApp(). This function is called as soon as the http service "songService" is done. 

This function starts off by checking if there is are any values. If there is some data, it goes ahead and initiates a new array. 

Now we use a for loop to loop through all the songs in songList.xml. While looping through, we're filling up our array "aryTemp" with the various attributes of the songs.

Then we set the dataProvider for our combo box "cbxMusic" to dp, which gets it's data from the array aryTemp.

Almost done! All that's left is the play, stop, etc... buttons!

<mx:ComboBox left="10" top="10" id="cbxMusic" change="aMusic.setSong(cbxMusic.selectedItem.data);" />

<mx:Button label="Stop" left="10" verticalCenter="-29" click="aMusic.onStop()"/>

<mx:Button x="70" y="40" label="Play" click="aMusic.onPlay()"/>

<mx:Button x="129" y="40" label="Pause" click="aMusic.onPause()"/>

<mx:Button label="Previous Song" verticalCenter="1" left="10" click="aMusic.cyclesongArray('rev',cbxMusic)"/>

<mx:Button x="125" y="70" label="Next Song" click="aMusic.cyclesongArray('forw',cbxMusic)"/>

Explanation:

When the user clicks on the combo box and selects a new song, the function setSong() is called directly from the audioManager class, and we pass on a number (cbxMusic.selectedItem.data) that correlates to number in the songList array in the audioManager class.

So, for example, Song1 has a value of "song number 1" and data "12". In our songList array in the audioManager class, songList[12] = "song number 1.mp3", so that sound would play. Make sense now?

The rest of the functions are pretty easy to grasp. The stop,play, and pause buttons are self explanatory. When clicked their respective functions are called and they do their thing.

The previous song and next song buttons are slightly different, however. With a little customization to the audioManager class, I managed to change the change the song currently selected in the combo box when the cyclesongArray function was called.

So if the currently selected song in the combo box was "Song Number 1", and you hit Next Song, it would automatically change to "Song Number 2" and start playing that song!

The function requires two arguments, the direction in which you want to cycle (next - forw(forward),previous - rev(reverse)), and the current component (so we can change the selected item).

With that, your Flex MP3 Player is complete! Congratulations! 

Download: Flex MP3 Player Basic (No Sound Files) - 634 Kb

Download: Flex MP3 Player (All Sound Files) - 11 Mb

View Live Example