Flex MP3 Player--tutorial.jcwcn.com

For this tutorial we're going to use the audioManager actionscript class from dhtmlnirvana to play all the sounds.

There are several ways you can do this, but this is probably the simplest.

What we are going to do is create a drop down box which is the song list. The data for the song list is got from an external XML file using an HTTP service.

When the user selects a new song from the dropdown box, the song that is currently playings stops and the new one begins. Our actionscript class knows which song to play using an internal array of songs.

Sounds complicated? Well, it's not that hard. It'll all become clear as you keep reading!

Step 1 - Setting up your GUI

Create a new project and call it "MP3 Player" or whatever you wish. File -> New -> Flex Project

Step 1

Drag a panel onto your document. This is where we will store all the buttons and information.

Give your panel a title, for example, MP3 Player. An ID won't be necessary for now.

I would recommend using some layout constraints to get your panel right in the middle of the page.

Step 2

Now that we have our basic panel setup, lets begin adding the other components.

Drag a Combo Box onto the document. This will be the song list. Give it and ID of "cbxMusic".

Now put 5 buttons in the panel. These will be the Next, Previous, Stop, Play, and Pause buttons. Of course you could use images but this just saves time.

Step 3

And thats it!

Your GUI is now complete!

Step 2 - The Code

Alright now we're almost done!

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

Code :

<?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 :

Code :

<?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 :

Functions.as :

// 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!

Code :

<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).

Flex MP3 Player

relation tutorial

Category

New

Hot