This tutorial will be building on two previous tutorials:
In this tutorial, we'll look at how to add a pause button to our music player. If you haven't yet worked through the first two tutorials, or if you haven't downloaded the source file from the volume slider tutorial, then you can download it here. This is the file we'll be starting with. In this file, we've already created the basic functionality to play and stop a sound and to control the volume with a draggable slider.
The Pause Button
Creating the code for the pause button is going to be similar to the code for the stop button, but it's going to take a little bit of extra tweaking in order to get it to work properly. With our stop button, we simply stopped the sound from playing so that when we clicked on the play button again, we were starting the song over from the beginning. When we hit the pause button, however, we want to be able to resume the playback from the point in the song where we were when clicked the pause button. So, in order to do this, we need to store the current position of the song whenever we click on the pause button.
1. Create the pause button. Naturally, before you can start adding code for your pause button, you need to actually create it. I created mine to go along with the theme I had already developed for my play and stop buttons, and then I gave the pause button an instance name of pause_btn.
2. Create a variable called "pos." In this variable, we'll keep track of the current playing position of our song. As you'll notice in the image below, I declared the pos variable just below the rest of my initial variable declarations, on line 7.
I also set the pos variable equal to a default value of zero, because--naturally--when our file first opens, we're going to be at the very beginning of the song. This number, by the way, represents how far we are into the song in milliseconds. The reason for this is that when we use the "play()" method of the Sound class, we can enter in a number within the parentheses in order to tell Flash how far into the song (in milliseconds) we would like to start playing. Also, there is a property of the SoundChannel class called "position" which gives us the current position of the song (again--you guessed it--in milliseconds).
3. Write the code for your pause button. This code will consist of the usual event listener and corresponding function, as seen below:
In line 9, we add our event listener, which causes our "pauseMusic" function to execute when triggered. Within this function, we're checking the "isPlaying" variable to see if the music player is currently playing music (this variable was created in a previous tutorial), and if the music IS currently playing, then 3 things need to occur:
- We need to store the current position of the song, as seen in line 15. The current position can be accessed with the "position" property of our SoundChannel object, which we've called "sc." In this example, we're storing this position in the "pos" variable that we created back in step 2.
- We need to stop the sound (line 16). The code for doing this is nothing new. It's the same code we used for the stop button.
- We need to change the "isPlaying" variable to false. Since the music will no longer be playing once we hit the pause button, the "isPlaying" variable needs to reflect that.
4. Update the code within the "playMusic" function. We already created this function in the first tutorial of this series, but we need to add one more thing to it.
Before we altered the code, the parentheses for the "music.play()" method were empty. If we were to leave it empty, then Flash would assume that there was a zero in the parentheses, which would cause the song to play from the beginning. But if we've only hit the pause button, then we don't want to start over from the beginning when we hit play again. We want to start from where we were when we hit pause. In order to do this, we simply put the desired position, which is stored in the "pos" variable, in the parentheses.
5. Update the code within the "stopMusic" function. Because the "music.play()" method is now using the "pos" variable to point to a specific position within the music file (instead of pointing to the default of zero), we now need to update the stopMusic function so that when we hit the stop button, the "pos" variable is reset to zero.
Now, when we hit the play button after hitting the stop button, the music will once again start from the beginning.And that about wraps it up for our music player tutorials. I hope you've learned a lot from these. Be sure to keep me updated with the types of tutorials you'd like to see on the site, and if you haven't subscribed to the site yet, you can do so from the subscription options in the left column of the website.
Source file: pause.zip
Jon
Hey Craig,
GREAT! It’s all sorted. Thanks heaps.
Although, when I tried to make it so the button would change from pause to play (and back again), rather than them both being on the same frame, it didn’t seem to work. All I did was add gotoAndStop(1 or 2) to each function, but it said something about a null object reference… Anyway, at least it’s working well with the pause and play visible next to each other- so I’m very grateful!
Thanks once again,
-Jon
Cari
This is exactly what I was looking for! Thanks, Craig!
Cari
Kevin
Excellent Tutorial – thankyou
Gave exactly the information I was looking for to help me make flash audio buttons
Carlos
Thank you, thank you, thank you, thank you…. You were born for teaching..I’ve been using your tutorials for my web site(still on construcction).
Christina
Great tutorials! I’m using this one on a project now. Do you know how to create a button that toggles from play to pause to control sound?
Machine
ok i made this player but what happens after the songs done? when u click play again it does nothing. So you have to click stop first than play to make it reset. How can you make it automatically reset so when u click play again it plays the song over?
zarina marquez
Im traign in flash cs3 to aplay a botton with pause and play funcion but I’m so lost so i hope some one can help…
Scott
Is there a way to make the play button fade into the pause button instead of both being there?
That would be really cool…
Someone let me know please
Scott-bailey-83@hotmail.co.uk
Belinda
Hi Everyone, I’m pretty new at all this too, but I added a little extra to Mr. Campbell’s stuff that seems to be a reply to some questions. I made the play/pause button toggle. I also made it so when you hit stop, it doesn’t reset your volume. The volume is always what the slider is at.
Check out my additional code at:
http://belindamarie.blogspot.com/
Thanks again Craig! Your tutorials are SO awesome and helpful!
Peter
This is how I implemented the pause in my app, but it doesn’t completely work (at least with the .mp3 files I am using). When I resume playing, the song does not start playing at the correct spot but skips ahead a bit.
The channel is reporting the expected position, but the playback is ahead. I also have a “progress bar” to show the remaining time in the song. If I pause and unpause, the song finishes well before the progress bar (which is based off channel.position and sound.length).
Has anyone else seen this?
Matt
Masterfully explained tutorials. I wonder if there is some insight you can offer with regards to multi-track playback controlled by one play btn but with individual volume control? Curious.
Thanks!
John Merlino
I have done all and am using Flash CS3 but the script is not working. I have only changed the button looks and given them the same name as the demo, copied the script and changed the name of the music file in my sounds folder to jazzMusic.wav the code looks like this now but I am no getting anything?
var music:Sound = new Sound(new URLRequest(“../sounds/jazzMusic.wav”));
var sc:SoundChannel;
var isPlaying:Boolean = false;
var pos:Number = 0;
bianca
Hi I had trouble before (as you can see in part1 of this. But now it all works perfectly! Thanks so much! I was wondering if you can post a tutorial on having more than one song. I don’t need display names or anything like that but I have a next and back button set up and another song to add to my website.
Can you please please show me how? I’ve had to most luck with your tutorials.
thanks!!
Jason
Just wanted to say a quick thanks for providing the handy tutorial
Very easy to follow and well explained.
Cheers!
Bryan
Can someone help me on how do I have the music start automatically, instead of having to hit play, and yes it is a band website…. so there is a reason (-:
Thanks,
Bryan
Plus one other question, any way to have the volume at 50% level when it starts ?
Thanks,
fab
Thank you so much for this most excellent tutorial. You are ace!!!
fab
any chance you’ll be doing a preloader so that it has downloaded a bit before it starts playing? (or if you have already done this could you point me in the right direction as I didn’t see it).
thank you once again.
John
Hey cheers dude just what I wanted and nicely explained intro to AS3
Gabriel
How to store Sound Position after i click the StopButton?
This is to restart at that position when i click PlayButton again!
Cheers!
Gabriel.
Belinda:
Player not found at blog:
http://belindamarie.blogspot.com/
:O
Cheers!
Gabriel.
Hi Again Belinda!.
Post was found!
So sorry!
Cheers!
T. Brown
Dude, I have used this tutorial some what for class… Since I am teaching CS4; a brand new class…. This combined with my AS3.0 File have proved invaluable. Thanks alot, caus enot only my students, but I have a some what problem with the vastness of Flash… As a programmer, it’s difficult to have so many options of what to do… (AKA ActionScript file, Timeline, Actions Frame, Objects, Shapes, buttons, MovieClips..) This is a transition…. I will be viewing more in the future. Keep up the good work!!!!
danns
thanx! very helpful indeed