RSS link icon

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: Thursday, September 11, 2008

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


Mony says: Wednesday, August 06, 2008

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: Saturday, July 19, 2008

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: Thursday, July 10, 2008

...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: Thursday, July 10, 2008

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: Thursday, July 10, 2008

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


SasuS says: Thursday, May 15, 2008

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: Thursday, May 15, 2008

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: Friday, March 28, 2008

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


Admin Bob says: Monday, March 24, 2008

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

  Next 


 

 

 

 6

 
 
   Web Premium
 
 

All rights reserved, Copyright 2008. Contact