Friday, June 29, 2018

Pausing and Resuming Sound in ActionScript 3 0

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, its important to note that youre 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, youll need to find a way to tell Flash to remember at which point along the sound files playback its 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, youre 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?
Youll 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. Its 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. Its 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 youll have to specify 1000 for 1 second, 2000 for 2 seconds and so on...).

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

//Lets 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);
Lets begin.

Open the Flash exercise file and take a moment to observe the elements on the stage. Youll see a play button (play_btn) and a stop button (stop_btn). Theres 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 its covering the pause button). Later on, well 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 files position just right before its 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
}

Lets 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 its 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 files 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;
}

Theres 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 youre just stuck with the pause button. We want the play button to come back once the song finishes playing. So lets 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, well 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 well 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, lets 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. Youve just learned how to successfully pause and resume sound playback.

Heres 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;
}


go to link download
Posted by at