RSS link icon

.

Mp3 player with volume slider using Actionscript 3


Hi guys, im back with a new flash actionscript 3.0 tutorial, this time we will be making a mp3 player with a volume slider, I must admit, I tried making one some month ago, it didnt work out that well, but I promis you, this works great so just follow along or download the source code at the bottom.

 

 

Before we get all excited and start working with actionscript, first we need to do some preperations, make a few buttons and graphics to make our mp3 player look good. So try to follow along, you can make your own graphic buttons, so I wont guide you through how I made mine, only the structure.

So on the visual part, lets make a play, pause and stop button, convert them all into movie clips and give them the following instance names by going to the properties panel. play_btn, pause_btn and stop_btn.

 

mp3 player with actionscript

 

actionscript mp3 player

 

Now we need to make the volume slider, the volume slider consist of a stroke 100 px wide, (its important that its excacly 100 px). Convert it into a movie clip and name it volume_mc. Inside this volume slider movie clip make a handle graphic, convert it into a movie clip and name it mySlider_mc, and place it at the right end of the stroke like below.

 

 

actionscript mp3 player

 

Now we are ready to do some actionscript, so go to the main stage and hit f9 or what ever you do to open up the actionscript panel.

To make things easier for both you and me I commented the code inline with the actionscripting, so everything should be explained line by line, and you should be able to copy and past the code directly into your own project.

 

And here is the source code:

//attatch/import the music file.
var musicPiece:Sound = new Sound(new URLRequest _ 
("http://blog.0tutor.com/JeffWofford_Trouble.mp3"));

// Make a sound channel to change sound configurations.
var mySoundChannel:SoundChannel;

// This variable is checking if the music is playing
var isPlaying:Boolean = false;

// to remember the position of the music playing when we pause, _ 
to start at the same place


var pos:Number = 0;

// First button we will make is a play button, add an eventlistener.
play_btn.addEventListener(MouseEvent.CLICK, play_);

function play_(event:Event):void {
//Check if the music is NOT playing, then make it start.
if (!isPlaying) {
mySoundChannel = musicPiece.play(pos);
isPlaying = true;
}
}

// The pause button, here we will use the pos variable we made earlier.
pause_btn.addEventListener(MouseEvent.CLICK, pause_);

function pause_(event:Event):void {
// if the music is player, save the current time and stop the playing.
if (isPlaying) {
pos = mySoundChannel.position;
mySoundChannel.stop();
isPlaying = false;
}
}

// Now the final button is the stop button, allmost thet same as pause
stop_btn.addEventListener(MouseEvent.CLICK, stop_);

function stop_(event:Event):void {
// First we check if there is anything to stop then make it stop, and reset the pos variable to 0 (start time)
if (mySoundChannel != null) {
mySoundChannel.stop();
pos = 0;
isPlaying = false;
}
}

// this is a bit complicated, but I will try to explain anyway.
// first we make a rectangle and set its width to 100.
var rectangle:Rectangle = new Rectangle(0,0,100,0);

// then we need a varible to check if the handle is being dragged.
var dragging:Boolean = false;

// the eventlistener for startdragging
volume_mc.mySlider_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
function startDragging(event:Event):void {

// here we tell flash the margin on where it should be able to drag, (remember 100 pixels back and forth)
volume_mc.mySlider_mc.startDrag(false,rectangle);
dragging = true;

// This is very important, an eventlistener so we can change the volume, not only make it look good.
volume_mc.mySlider_mc.addEventListener(Event.ENTER_FRAME, adjustVolume);
}

// well here is the adjust volume function, its not that complicated
function adjustVolume(event:Event):void {

// we make a variable to calculate the volume from the slider handle position and divide it by 100
var myVol:Number = volume_mc.mySlider_mc.x / 100;
// then we set it with the mySoundTransform
var mySoundTransform:SoundTransform = new SoundTransform(myVol);
if (mySoundChannel != null) {
mySoundChannel.soundTransform = mySoundTransform;
}
}

// and of cause the stop draggin function, I dont feel the need to explain it.
stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
function stopDragging(event:Event):void {
if (dragging) {
dragging = false;
volume_mc.mySlider_mc.stopDrag();
}
}

 

Yah I know that was a lot of code, and it might look a bit confusing, but I promis you, if you try to put it into your own flash file, maybe event delete the comments I made, you will see kind of a paddern, how and why stuff works and how you made a simple mp3 player with actionscript 3.0 :-)

Best of luck to you all.


Peter says: 2010-02-10

Its just a waste of time without the source file

Admin Bob says: 2008-10-13

I'll be making one very soon, so keep an eye out..

jalex says: 2008-09-25

Great tutorial! I love when complex stuff is presented simply. Do you know how to add a progress bar with that Thanks

tahir says: 2008-09-18

really good and easy also.

Bryant Miano says: 2008-09-12

Great tutorial! It has helped me immensely...thanks man!

Hemn says: 2008-08-30

Thank you very much, IChr(34)m from Kurdistan-Iraq and I have tried it by myself. Everything worked properly. But at the beginning I have confused when you said name the "volume bar" movieclip as "volume_mc" that was clear but the problem that I have encountered that I thought you mean set it as a name for your volume bar movieclip instead of setting it as an "instance name" for it. Thank you very much... May Allah reward you...

Flash Designer says: 2008-08-24

Nice tutorials...i will use sound control for my dynamic flash presentation. Design from www.gigaturn.com

Judy says: 2008-08-07

I wonder if the width of the volume_mc is higher than 100, say 200. Then, how to modify the script

Void says: 2008-08-11

Works really great. I was looking for a mute button but found this instead. Thx a bunch! =)

Kazey says: 2008-07-19

Yeah the source file...Works Great!

Claudia says: 2008-07-17

It would be nice to get the source files to download with all your articles ... thanks

Hi says: 2008-07-31

Where is that Source file i just ask