Universal Volume Control

Annoyed by the fact that you have to readjust your volume each time you visit a page? Well now there's a solution. In this article we will walk you through a simple custom SWF component that will allow your users to maintain their volume settings throughout page loads, and even from one visit to another. To do this we create a lightweight SWF that tracks when a user has changed their volume and stores that volume setting in a Flash shared object, otherwise known as as Flash cookie. To see it in action, change the volume on the player below and refresh the page.

As you can see, or should I say hear, your volume setting has been persisted despite a page refresh. Let's take a look at how this was accomplished.

The code

This example was built in Flex Builder, but it is just one simple class that could be re-used in any larger project. Download the source and compiled SWF here. Alternatively, you can find the source code below.

package {
    import com.brightcove.api.APIModules;
    import com.brightcove.api.CustomModule;
    import com.brightcove.api.events.MediaEvent;
    import com.brightcove.api.modules.ExperienceModule;
    import com.brightcove.api.modules.VideoPlayerModule;
	
    import flash.net.SharedObject;

    public class UniversalVolumeComponent extends CustomModule
    {
        //-----------------------------------------------------------
        // Constants
        //-----------------------------------------------------------
  		
        //-----------------------------------------------------------
        // Member variables
        //-----------------------------------------------------------
  		
  	// Brightcove Video Player Module
  	private var mVideoPlayerModule:VideoPlayerModule;
  		
  	// shared object to store the volume in across page loads.
  	private var mSharedObject:SharedObject;
  		
	public function UniversalVolumeComponent() {
           //constructor, could be a good place to initialize a logger. 
	   }
		
           // Entry point - called automatically by the Brightcove Player once all modules are
           // loaded and templates are initialized.
           override protected function initialize():void {
                // In case the publisher did not check the 'enable ActionScript/JavaScript APIs'
                // we load the modules. 
	        player.loadModules();
        	
		// Set the video module so that we can interact with it throughout our class.
		mVideoPlayerModule = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
        	
                // Register event to listen to change in volume so that it can be stored in the
                // shared object, otherwise known as a flash cookie.
                mVideoPlayerModule.addEventListener(MediaEvent.VOLUME_CHANGE, onMediaChange);
        	
                // Check to see if the shared volume control has already been set. 
                // Note that you should set the name string to your own unique name.
                mSharedObject = SharedObject.getLocal("brightcove-universal-volume", "/");
			
		if(mSharedObject.data.volume != null) {
		    setVolume(mSharedObject.data.volume);
		}
	}
        
       /*
        * onMediaChange is a registered event listener that listens for when the volume
        * of the player has changed.  When it does, we then store this new value in the
        * shared object so that the next time the player is loaded up the volume is persisted.
        */
        protected function onMediaChange(pMediaEvent:MediaEvent):void {
            mSharedObject.data.volume = mVideoPlayerModule.getVolume();
	}
        
       /*
        * setVolume does just that.  Takes in a number between 0 and 1 and sets
        * the player to that volume.  This is called when the component is initialized.
        */
	protected function setVolume(pVolume:Number):void {
	    //Make sure that the volume is not louder then 1 or less then 0.
	    if(0 < pVolume && pVolume < 1) {
		mVideoPlayerModule.setVolume(pVolume);
            }
        }     
    }
}

To get started, you will need the Player API SWC. A copy of this can also be found in the lib directory of the source code. This is a simple class with just three functions taking care of the functionality. As can be seen above, the Brightcove Player SWC calls the initialize function once the player is ready to be interacted with. From here, we simply check to see if the user already has a Flash cookie set with their current volume setting. If they do, then we tell the player to set the volume to this setting. However, just setting the volume on load would be useless if we didn't store it in the Flash cookie when the user changed the volume. For this, we register an event listener with the player to see when the user has changed the volume and then proceed to store it in the Flash cookie. Note that you should make the name of the cookie unique to your site, in order to avoid conflicts with other sites.

Integrating the component into your player

Incorporating this new component into your player is extremely easy. To do so, you need to place the SWF on a publicly accessible server. Then in the Publishing module, select the player that you would like to add this component to and click Settings. Then in the left hand navigation, click Plug-ins. Enter the URL to your SWF and save. Presto! You now have a custom component that will track the user's volume settings, adding that nice touch to your user's experience. See the screenshot below for where to do this in the Publishing module.