Mp3 player made simple with AS3

In this flash actionscript tutorial I will show you how to make a simple online flash mp3 player, actually using these techniques you will be able to advance it easily with more features to make a full functional online flash mp3 player.

First we will prepare the stage, eg. all the movieclip instances.

So first make two buttons for the play and stop functionality, then an up arrow and down arrow, right click then separately and convert them to movieclips (not buttons symbols).

In the properties panel give all the movie clips an instance name, like I did. Remember flash does not ignore capital letters so remember where you use upper case letters.

play button = "playButton_"

stop button = "stopButton_"

vol up button = "soundUp_btn"

vol down button "soundDown_btn"

Now we are ready for the flash actionscript coding, I have made all the description inline with the code, starting with "//" as comments in flash actionscript so you can just copy and paste all the code.

// First we define a variable of type URLRequest and attach our mp3 file.
var soundRequest:URLRequest = new URLRequest("JeffWofford_Trouble.mp3");

// Then we make a new sound instance and naming it sound_
var sound_:Sound = new Sound();

// Also a sound control to control and adjust later on.
var soundControl:SoundChannel = new SoundChannel();

// last variable is a soundtransform instance, this is to control the volume up and down function. (and we set them to 1,1 thats the right and left speakers).
var transform1:SoundTransform = new SoundTransform(1, 1);

// now we attach the sound file to the sound_ instance we made before.
sound_.load(soundRequest);

// here is four eventlisteners, the control all our buttons, and "listen" and calls functions if the buttons are clicked.
playButton_.addEventListener(MouseEvent.CLICK, playSound);
stopButton_.addEventListener(MouseEvent.CLICK, stopSound);
soundUp_btn.addEventListener(MouseEvent.CLICK, soundUp);
soundDown_btn.addEventListener(MouseEvent.CLICK, soundDown);

// This is the function to control the play button, only thing happening is that we attach the soundcontrol to the sound and calls its play method.
function playSound(event:MouseEvent):void
{
	soundControl = sound_.play();
}

//the stop function also uses the coundControl to stop the mp3 file from playing.
function stopSound(event:MouseEvent):void
{
	soundControl.stop();
}

//Now this is a bit more tricky (not much but more then just stop and play).
//At the top of our code we declared a soundtranform named transform1
//this is a value, and by saying ++ we add one to the original volume number then attach it to the soundcontrol.soundTransform
function soundUp(event:MouseEvent):void
{
    transform1.volume += .1;
    soundControl.soundTransform = transform1;
}

//this is the same as above, we just use -- to subtract from the volume number.
function soundDown(event:MouseEvent):void
{
    transform1.volume -= .1;
    soundControl.soundTransform = transform1;
}

As you might see its quite easy, and now that we have made a simple player, adding a mute and pause button is just as easy, we could even make a volume pan and drag it to control the volume, just set it to the volume value, but that will be in another tutorials.

I hope you learned something, thats all for now.

Sandra says: 2008-09-11

Thanks so much! It works beautifully and you did a very nice job with explaining everything away.

Mony says: 2008-08-06

How to preload the .mp3 file with loading information like loading % and bytes information for this. I want to preload the songs once it is become 100% it has to play automatically, anyone have anyidea

Erebus says: 2008-07-19

None of those solutions worked for me, I used this... var songPlaying:Boolean = false; var soundRequest:URLRequest = new URLRequest("S.F.H.S.mp3"); var sound_:Sound = new Sound(); var soundControl:SoundChannel = new SoundChannel(); sound_.load(soundRequest); playButton_.addEventListener(MouseEvent.CLICK, playSound); stopbtn.addEventListener(MouseEvent.CLICK, stopSound); songPlaying = false; function playSound(event:MouseEvent):void { soundControl = sound_.play(); songPlaying=true; } function stopSound(event:MouseEvent):void { soundControl.stop(); songPlaying=false; }

mullen says: 2008-07-10

...and please has anybody idea how to start the song immediaely when the flash starts and then is controlled by the butts tx...

mullen says: 2008-07-10

maybe would be good to note that in the first line Boolean = false; should be "true" value, if not the player is not operatonal at all...TX again for nice example

mullen says: 2008-07-10

OK, that is right what i was looking for...easy thing...TX again

SasuS says: 2008-05-15

I solved the problem like this: var stopper:Boolean = false; // add a boolean with a property false var soundRequest:URLRequest = new URLRequest("JeffWofford_Trouble.mp3"); var sound_:Sound = new Sound(); var soundControl:SoundChannel = new SoundChannel(); var transform1:SoundTransform = new SoundTransform(1, 1); sound_.load(soundRequest); buttons are clicked. playButton_.addEventListener(MouseEvent.CLICK, playSound); stopButton_.addEventListener(MouseEvent.CLICK, stopSound); soundUp_btn.addEventListener(MouseEvent.CLICK, soundUp); soundDown_btn.addEventListener(MouseEvent.CLICK, soundDown); function playSound(event:MouseEvent):void { if (stopper== true) { soundControl = sound_.play(); stopper = false; } } function stopSound(event:MouseEvent):void { soundControl.stop(); stopper = true; } function soundUp(event:MouseEvent):void { transform1.volume += .1; soundControl.soundTransform = transform1; } function soundDown(event:MouseEvent):void { transform1.volume -= .1; soundControl.soundTransform = transform1; }

SasuS says: 2008-05-15

IChr(34)ve run into the same problem myself: if you press the play button several times, it keeps adding the sound on top of each others...

Mike says: 2008-03-28

What about a pause button Could not figure out how to add one, and thereChr(34)s nothing like soundControl = sound_.pause(); Also, IChr(34)m hoping to add a progress indicator (slider) that reaches the end of the slider bar when the song ends...

x_07 says: 2008-03-18

how do u make a playlist

Carlos says: 2008-03-15

The error in the volume is because in: // last variable is a soundtransform instance, this is to control the volume up and down function. (and we set them to 1,1 thats the right and left speakers). var transform1:SoundTransform = new SoundTransform(1, 1); (1,1) is not left and right, the first parameter is initial volume, and the second is PAN, so set that one to 0 and youChr(34)ll have the sound all right: var transform1:SoundTransform = new SoundTransform(1, 0);

Admin Bob says: 2008-03-24

hi x_07, well, thats a bit more complicated, and would require a bit more work, maybe I will extend this version sometime.

Admin Bob says: 2008-03-13

Oh yah, I see, thats an easy fix, I will do that tomorrow. thanks

someone says: 2008-03-12

edit: it will play the song through the song, just try it, you will see!

Someone says: 2008-03-12

When you click play more than 2 times, it will play the song more times and you cant stop it!!!

Admin Bob says: 2008-03-12

Thanks I fixed it now :-)

error says: 2008-03-11

there is an error, if you turn down music to zero, and then turn it up theres only one channel playing