Welcome to part 2 of our Streaming MP3 player tutorial. Part 1 can be found here.

AND FOR THOSE WHO WANT A PAUSE BUTTON, here an update: click here!

Last time I've showed you how to create a basic mp3 streaming player using XML, you got all the basics you need, you have the functionality, you got the code. Now it's time to show you a bit more that is needed/possible.

Upon request on the forum, I will show you this:

• Time display


• Volumecontrol


• ..some more small things

Let us start with something easy.

Display of further elements (like artist)

Maybe you already found on the P2L forum a topic regarding this mp3 player, and someone that didn't knew how to put the artist/group on the same text field.
Here's how I've solved his problem.

XML:
I've just created a new attribute called band:



FLASH:

Last time we defined a global variable holding the name of the mp3 file we stored in our XML.

So I've just set a new variable named "songband"


But that's not everything.. We also need to define it on other lines of our actionscript.
Here you see our array for the songname:


So now we just need to add a new line with following code:

explanation we've already set a variable named "songband" and now
we're creating a new array for that variable to hold our data.

If you want to test already if everything works, just place a trace
action on the script:

If you XML is correct and every step till now has been done you should get this as output:
Test1 test1.mp3 Twodded Band
Test2 test2.mp3 P2L Band


When we create our soundobject we passed the array with it, so we can display the name and play the file.


Now things are starting getting easier and easiert or not? I think you already guessed what you need to put here:


Now where can I see the Bandname on my movie?
Do you remember this piece of code?

You noticed already that I'm displaying the name of the track using this _parent.display_txt.text=name;
so we now just add the band name to it, how?
We just tell to append a whitespace a slash and a whitespace and then show the band name.
Since we are working with textfields, you can enter whatevery you want to be showed inside of the "".


Now do a test run on your movie, and you will see that the bandname is being displayed. Kewl uh!

Nevertheless, we are not done still, as soon as you push a button or the track ends, all the next tracks will not have any banddescription on it, since we didn't define it to do so.

As you see I defined the songband array for every possible state
(soundcomplete, play, next and back)



This method can be used for every kind of text input that you want to push with your song.

The First part of this tutorial is done, let's see what we can do else..


Are you still with me? Congrats you will get rewarded with a ... Time Display

First off, we create a new dynamic textfield in our stage and give it the instanceName of timeDisplay_txt, we also type 00:00 into that textfield since we don't want that the scripted counter just pops up.

How do we want to display our time? normally cd players just show minutes and seconds of each track, some of those also show miliseconds.. but hey.. we don't need those.

So let us set a Interval of one second.

Timer is the name of our function that we will write, and 1000 means, every 1000ms should this function being called.
I will place the interval inside of the prototype just after the text display we did before.

As next we need to create our function that will output the playtime of our mp3 file.
For the beginning let us just trace it to test if it works


This code has been placed before the prototype, basically you could post it anywhere, as long as it's not inside any loop or query.

Press CTRL+ENTER to test your movie and you will see that besides of the
xml information we pulled before, we also get some strage numbers, those
are being update every second.. you remember that we set our interval to
1 second. And the time is being displayed in miliseconds. No one will
want to read that as it is, so let's change it to something more
userfriendly.


To achieve it, we need to work a little bit more, first of all..

Let us remove that trace action and replace it with
this:
Now you see our miliseconds being displayed in our textfield we created.

Next we need to make time readable for everyone.

Let us store our time inside a variable, so we don't have to type so much and convert it right away to seconds.



I've replaced sound_obj.position with time to display the time:


Now we have a more or less readable timeformat, but we can do it better.

Let us divide the time by 60 so that we have minutes


Now that we have our minutes, we also need to define the seconds, that are available from this song. For this we will going to use Modulo = %

Now what is modulo?


In our case, if our song has a length of 80 seconds then we calculate 80%60 equals 20, 60 fits once in 1 and 20 is the rest. resulting in 01:20.

the code needed for this calculation is very easy!

Now we have also our seconds.

Now there's still one small thing that I forgot. When time is under 10 seconds we want to show the seconds with a 0 in front. We need to write a query for that.
Lets append our code with this line


In our case we are not using any mp3's longer then 1 minute but for any case, here the code for the minutes.


Last step will be the display of the correct time in our textfield, go back to our display code and replace time with min+":"sec";

If you test the movie now you will see that our display is working correctly.. till....


...the song ends... or you press any button...

There is good way to fix the whole problem, we just need to clear interval and set the time back to 00:00. I will show you here how to fix that.

On the onSoundComplete event we need to clear the interval and set the time back, we do that with this piece of code:


Now the time will be display correctly as long as you don't push any button.

To fix that, let us remove the sound_obj creation inside the onload function

remove this..

And we will create the soundobject inside our prototype.
First we check if there is a soundobject.

If there is one we stop it.

If there is one we delete it.

If there is no sound object then create one.



Before you test the movie place this piece of code on every button you
have:


Here the complete button code now:




Now test your movie. Happy with it? Still want to learn more, then just jump to next page to learn .....


The volume Slider

Okay.. this is the last part of this tutorial, if you are still with me then grab some coke and something to eat, after this you will be playing around with your mp3 player till early morning.

Design some shape to act as background of your volumeslider, I just draw a square and moved the top left corner point throughout the bottom, so I have a more stylish volumeslide background. I didn't put much effort on the design since this is a pure actionscripting tutorial

Select the newly created shape and convert it to a movieclip, give it also a instancename of volBG.

Now create a handle where the user can lower or maximize the volume, I've just draw a rectangle and placed it ontop of the volBG. Again convert this shape to a movieclip, and give it a instancename of dragger

Now select both mc's and convert them also to a movieclip with the instance name volume1.

Right after the soundcomplete function we will place our actions for the volume dragger.



Here we tell our dragger that he's draggable ;) on the X-Axis it would be moved from 0 to the width of the volBG mc and I've also locked the Y-Axis since we don't need to drag it vertically.
As soon as the mousebutton is released we want to stop drag, just put this action into the onRelease function


Just do a small test of your movie, to check if your dragger is working as it should and if you can't drag over the volBG.



Everything working as it should? Good!

Let's move on to the last part of this tutorial

We want to control the volume of the sound depending on the position of the dragger.

Okay, we create an onEnterFrame function to control the sound, inside of that function I've created a new variable holding the percentage of our volume by diving the dragger by the width of the volBG and multiplying it by 100.
If we don't multiply it you will get a too low value to regulate the volume.
Then we just need to set the volume of the sound_obj to the variable "g".

Here the COMPLETE code:



And that's it, there you have your volumebar.

That's it for part II of the Streaming MP3 player, I don't have plans to create a part III until somebody asks for more features and extras.

Feel free to post your comments on the dedicated topic or if you want to contact me, then just PM me.

Here you can view a Live Example of the player.
and here you can download a .zip file containing the .fla, .xml and 2
sample mp3's to play around.

I hope you enjoyed this tutorial.

Tiago Dias aka. Funkysoul