Flash Projects - #5 - Custom Video Player Mute Control

Building further on the custom FLV player in previous posts, and definitely inspired by the BBC iPlayer, I decided to add further functionality, including a mute control to turn off the sound for a video currently playing.

The ActionScript is really very simple, and logical. Once you understand how to stream and attach video, attaching sound for control is very straight forward.

Quick recap

The original code required you to create a netConnection object and attach to that a netStream object:

//Net connection for video stream to video object
var myConnection_nc:NetConnection = new NetConnection();
myConnection_nc.connect(null);
var video_ns:NetStream = new NetStream(myConnection_nc);

Then you were instructed to attach the video stream to a video object on the stage:

this.vidHolder_mc.vid_video.attachVideo(video_ns);

Attaching audio

Setting up to control (or mute) the audio is not all that different. Use the following code:

//Attach audio of FLV for volume control
flv_mc.attachAudio(video_ns);
var audio_sound:Sound = new Sound(flv_mc);

Notice that the video and the audio both attach the same netStream object video_ns. While the audio will still be heard without attaching it separately, if we want to control it, we must attach it to a movie clip of its own as above. In this case a movie clip called flv_mc.

Controlling audio

Because we want a mute button that will change depending on the mute status (showing whether the sound is currently muted or not - visual feedback is such a wonderful thing), you need to create a variable to store the current mute status.

Insert the following code right at the top of your ActionScript:

//Mute control status, 0 = mute off sound on
var mutestatus = 0;

Then you need to create a movie clip to act as the mute button. This has just two frames, one containing an image of a speaker making noise, the other containing an image of a speaker not making noise (decide how to depict this however you like). Give the first frame the label muteon and the second frame the label muteoff. Don't forget to put a stop(); action on each of the frames or you will have an animated flickering button. Then drag an instance of the mute button onto the stage and give it the instance name mute_mc.

The following code will then allow you to mute and un-mute the sound, insert this at some point after the line you just inserted above:

//Mute control
_root.mute_mc.onRelease = function() {
if (mutestatus == 0) {
_root.mute_mc.gotoAndStop("muteon");
mutestatus = 1;
audio_sound.setVolume(0);
updateVolume();
} else if (mutestatus == 1) {
_root.mute_mc.gotoAndStop("muteoff");
mutestatus = 0;
audio_sound.setVolume(100);
updateVolume();
}
};

How does it work? Very simple. First it checks to see what the mute status is (whether it is muted yet or not). If it is not muted, it tells the button to look like it is muted (goes to the frame with the muted speaker picture), then sets the mute status to 1, then sets the volume to be 0, then updates the volume to make the 0 take effect. If, however, it is already muted, it tells the button to look like it is not muted (goes to the frame with the noisy speaker picture), then sets the mute status to 0, then sets the volume to be 100, then updates the volume to make the 100 take effect.

And that's a wrap.