Pausing and Resuming Sound in ActionScript 3.0

Exercise Files:
Pausing_Sound_Start.fla
CheerfulSong.mp3

NOTE: Be sure to save both files in the same folder.

In ActionScript 3.0, you can start playing a sound file using the play() method of the Sound class. And in order to stop playing a sound file, you use the stop() method of the SoundChannel class. Pausing the sound however, is not as straightforward. Pausing and resuming sound in ActionScript 3.0 involves a few extra elements.

When pausing sound in ActionScript 3.0, it's important to note that you're not actually pausing the sound. You will still need to stop the sound using the stop() method of the SoundChannel class. But before you stop the sound, you'll need to find a way to tell Flash to remember at which point along the sound file's playback it's currently on. Say for example you stop the sound file at the 10 second mark of the song, you will then need to store that information in a variable and then tell flash to resume playing at that same position when the song is played again. In other words, you're telling Flash to "remember" where the song was before it was stopped.

So how do you know the current position of the sound that is being played?
You'll need to use the position property of the SoundChannel class. The position property refers to the current position of the sound as it is being played. This gives you a value in milliseconds. You can store this value in a Number variable so that Flash can "remember" where the sound was at before it was stopped.

So now that Flash "remembers" the position, how do you tell it to resume playing at that same point?
The play() method of the Sound class has an offset parameter. It's an optional parameter that allows you to start playing a sound at a point other than the beginning. For example:

mySound.play(10000);
//10000 stands for 10000 milliseconds

This tells Flash to start playing the sound at the 10000 millisecond position. Take note that this is NOT a delay. The sound file is going to play immediately. It's simply going to skip the first 9 seconds of the song and start playing at the 10 second mark (the offset will read the value in milliseconds though, so you'll have to specify 1000 for 1 second, 2000 for 2 seconds and so on...).

So now you can store the sound file's current position in a Number variable, then use the offset parameter so that it can resume playing at that same position. For example:

//Let's say that this is the variable that will be used to store the position of the sound
var resumeTime:Number = 0;

//You can then associate the variable with the offset parameter like so:
mySound.play(resumeTime);

Let's begin.

Open the Flash exercise file and take a moment to observe the elements on the stage. You'll see a play button (play_btn) and a stop button (stop_btn). There's also a pause button (pause_btn). The pause button however is hidden underneath the play button. Move the play button to a different position in order to see the pause button (but be sure to bring it back to the original position where it's covering the pause button). Later on, we'll toggle the visibility of the play and the pause button so that when one of them is clicked, it becomes invisible so that the other one is revealed.

Create the following variables:

//This will be used to load the external mp3 file as well as to start playing the sound
var mySound:Sound = new Sound();

//Use a URLRequest to specify the path to the sound file to be loaded
var songURL:URLRequest = new URLRequest("CheerfulSong.mp3");

//This creates the SoundChannel object for the sound file to be played
var channel1:SoundChannel = new SoundChannel();

//This is the variable that will be used for the pause functionality.
//It will be used to store the sound file's position just right before it's stopped.
//Initialize it to 0 so that the sound file will play at the very beginning the first time the song is played.
var resumeTime:Number = 0;

Then use the load method of the Sound class to load the external sound file:

mySound.load(songURL);

Then create the event Handlers for the play, pause and stop buttons:

play_btn.addEventListener(MouseEvent.CLICK, playSound);
pause_btn.addEventListener(MouseEvent.CLICK, pauseSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound);

function playSound(e:MouseEvent):void
{
//Code for starting and resuming sound playback goes here
}

function pauseSound(e:MouseEvent):void 
{
//Code for the pausing functionality goes here
}

function stopSound(e:MouseEvent):void 
{
//Code for stopping the sound goes here
}

Let's go ahead and complete the playSound function first (which is responsible for starting and resuming sound playback):

function playSound(e:MouseEvent):void
{
  channel1 = mySound.play(resumeTime);
  play_btn.visible = false;
  pause_btn.visible = true;
}

Code explained:

channel1 = mySound.play(resumeTime);

This plays the sound file. It will be assigned to the channel1 SoundChannel object. You have to assign it to the SoundChannel object because the SoundChannel will be used to stop the sound and to get it's current position. The resumeTime variable is then specified as the offset parameter of the play method so that the sound file will begin playing at whatever value is stored in resumeTime.

play_btn.visible = false;
pause_btn.visible = true;

These lines toggle the visibility of the play and pause buttons. Upon clicking the play button, it will become invisible in order to reveal the pause button underneath.

And now for the pause functionality. This function will be called whenever the pause button is clicked:

function pauseSound(e:MouseEvent):void 
{
  resumeTime = channel1.position;
  channel1.stop();
  pause_btn.visible = false;
  play_btn.visible = true;
}

Code explained:

resumeTime = channel1.position;
channel1.stop();

Upon clicking the pause button, the sound file's current position is retrieved and then stored in the resumeTime variable. The sound is then immediately stopped.

pause_btn.visible = false;
play_btn.visible = true;

Just like in the previous function, this toggles the visibility of the play and pause buttons. But this time, when the pause button is clicked, it becomes invisible while the play button becomes visible again.

And now for the function assigned to the stop button:

function stopSound(e:MouseEvent):void 
{
  //This stops the sound
  channel1.stop();

  //Be sure to reset the resumeTime variable back to 0, otherwise, 
  //the playback will resume at the same point when it was previously paused
  resumeTime = 0;

  //Make sure that the play button is visible and the pause button 
  //is hidden whenever the stop button is clicked
  play_btn.visible = true;
  pause_btn.visible = false;
}

There's one more thing we need to add. If you test the Flash movie now, you will notice that when the song reaches the end, the play button does not come back, so you're just stuck with the pause button. We want the play button to come back once the song finishes playing. So let's add a SOUND_COMPLETE event handler for that. Whenever the song finishes playing, we need to make sure that the the play button will be visible again. In addition, we'll have to reset the resumeTime variable back to 0 to ensure that the sound will play from the very beginning once the user clicks on the play button again.

So first, go back to the playSound function and create the addEventListener statement for whenever the sound finishes playing. The event is Event.SOUND_COMPLETE and we'll name the function to be called when the event is triggered as onSongEnd:

function playSound(e:MouseEvent):void
{
  channel1 = mySound.play(resumeTime);

  channel1.addEventListener(Event.SOUND_COMPLETE, onSongEnd);
  // Remember that this should only be added after the play sound statement
  // is assigned to the SoundChannel

  play_btn.visible = false;
  pause_btn.visible = true;
}

Next, let's create the listener function for our SOUND_COMPLETE event handler. You can place this right after the stopSound function.

function onSongEnd(e:Event):void 
{
  //This sets resumeTime back to 0 so that the sound plays at the beginning
  //the next time it is played
  resumeTime = 0;

  //This makes sure that the play button is visible and the pause button is not
  play_btn.visible = true;
  pause_btn.visible = false;
}

So there you have it. You've just learned how to successfully pause and resume sound playback.

Here's the code in full:

var mySound:Sound = new Sound();
var songURL:URLRequest = new URLRequest("CheerfulSong.mp3");
var channel1:SoundChannel = new SoundChannel();
var resumeTime:Number = 0;

mySound.load(songURL);

play_btn.addEventListener(MouseEvent.CLICK, playSound);
pause_btn.addEventListener(MouseEvent.CLICK, pauseSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound);

function playSound(e:MouseEvent):void
{
  channel1 = mySound.play(resumeTime);
  channel1.addEventListener(Event.SOUND_COMPLETE, onSongEnd);
  play_btn.visible = false;
  pause_btn.visible = true;
}

function pauseSound(e:MouseEvent):void 
{
  resumeTime = channel1.position;
  channel1.stop();
  pause_btn.visible = false;
  play_btn.visible = true;
}

function stopSound(e:MouseEvent):void 
{
  channel1.stop();
  resumeTime = 0;
  play_btn.visible = true;
  pause_btn.visible = false;
}

function onSongEnd(e:Event):void 
{
  resumeTime = 0;
  play_btn.visible = true;
  pause_btn.visible = false;
}