Simple MP3 Music Player with sliding volume controller in Actionscript 3

We will create a music player that will have the following :-

1. Play Button. 2. Stop Button. 3. Pause Button *4. Sliding Volume Controller
The mp3 file you want to play should be in the same folder as the flash file. Let's assume its name is myMusic.mp3.

1. Play Button:-
i> We first need to draw the button. Hit Ctrl+F8 and name the New Symbol as "play_mc" without the quotes. You can draw it to look like anything you like. I'll draw it like this.

If you are new to flash you might be wondering about how to draw a triangle. The easiest way is to draw a small square and then click outside it now select the Selection Tool(V) and move the mouse near a vertex of the square. You will notice an inverted L sign under the pointer. Press the left mouse button and drag the vertex up
do it on both sides
and you get you triangle


ii> Now drag the button on to the Stage and select it. Open the Properties Window and set the instance name as play_mc.

2. Stop Button:-
i> Make it in the same way as before and name it as "stop_mc" without the quotes.
ii> Drag it onto the stage and give it the instance name of "stop_mc" without the quotes.

3. Pause Button:-
Same as before just give the names as "pause_mc".

You should have the three buttons on stage and it should look like this



4. Sliding Volume Controller:-
i> Create a new Layer and drag it below the layer that has the three buttons. Now draw a line below the buttons and then go to the properties panel to set the width as 100. Make a note of the X and Y Coordinate of that line. Here it's 215 and 265 respectively.



ii>Now select the first frame of the layer that has the three buttons. Draw a small circle which will be the actual slider. Select it and Hit F8 and save it as slider_mc. Double click on it to edit it and centre the cicle. Return to the Main Stage and go to the properties panel and give the instance name as slider_mc and set its X and Y coordinate as 315 (215+100) and 265 respectively.


Now we'll make the buttons work! Create a new layer and name it Actions. Select the first frame and Hit F9 to bring up the actions Window. Copy the following piece of code:-


var isPlaying = 0;//flag denotes whether the music is playing(1) or has been stopped(0)
var pos=0;//denotes the position in which the music was paused var mySound:Sound = new Sound(new URLRequest("myMusic.mp3"));//load the mp3 file
/*define the area in which the slider will move the arguments are X, Y, width, height*/
var rect:Rectangle = new Rectangle(215,265,100,0);

/*define the sound channel*/
var myChannel:SoundChannel=new SoundChannel();

/*define mouse event listners for the buttons and the slider*/
play_mc.addEventListener(MouseEvent.CLICK,playMusic);
stop_mc.addEventListener(MouseEvent.CLICK,stopMusic);
pause_mc.addEventListener(MouseEvent.CLICK,pauseMusic);
slider_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
slider_mc.addEventListener(MouseEvent.MOUSE_UP,dragStop);
slider_mc.addEventListener(MouseEvent.MOUSE_OUT,dragStop);

/*the slider will invoke the "adjustVolume" function*/
slider_mc.addEventListener(Event.ENTER_FRAME,adjustVolume);

/*PLAY BUTTON*/
function playMusic(e:MouseEvent) {
if(isPlaying==0)
myChannel=mySound.play();
isPlaying=1;
}

/*--------------STOP BUTTON--------------*/
function stopMusic(e:MouseEvent) {
if(isPlaying==1)
myChannel.stop();
isPlaying=0;
pos=0;
}
/*----------------------------------------*/

/*--------------PAUSE BUTTON--------------*/
function pauseMusic(e:MouseEvent) {
/*if music is playing*/
if(isPlaying==1)
{
pos=myChannel.position;//record position
myChannel.stop();
isPlaying=0;
}
/*if music is paused*/
else
{
isPlaying=1;
myChannel=mySound.play(pos);
}
}
/*----------------------------------------*/

/*--------------SLIDING CONTROLLER--------------*/
function dragStart(e:MouseEvent) {
slider_mc.startDrag(true,rect);
}

function dragStop(e:MouseEvent){
slider_mc.stopDrag();
}

function adjustVolume(e:Event) {
var vol=(slider_mc.x-215)/100;
var volChange:SoundTransform = new SoundTransform(vol);
myChannel.soundTransform = volChange;
}
/*----------------------------------------*/

That's it. Hit Ctrl+Enter to check your own Music Player!!