How to Create Custom Volume Controls in Articulate Storyline 2?

on



In the Articulate Storyline 2, by default, the Volume Control position is fixed on the player and cannot be customized. Due to this limitation, it was challenging for us to customize volume controls.

How did we overcome this limitation?

We created our own customized audio controls using slider via JavaScript and SWF file. This way we could develop fully customized volume control and placed at desired position.

Let’s have a look at the steps to create Custom Volume Controls for both HTML5 and Flash.

Common steps for Flash and HTML5 outputs:
  1. Insert a slider in the Master Slide and rename it as “VolumeSlider”
  2. Create Variable “VolumeCount”
  3. Set slider settings as shown below 

     4. Add triggers to the slider as shown below


Steps to Support Flash Output:

1. Import “soundmanager.swf” from below location or attached here.

Steps to Support HTML5 Output:
  1. Add a trigger to execute JavaScript when slider moves on slider
  2. Insert the following JavaScript inside the trigger var player = GetPlayer();
    var volumeCount = player.Get
    Var(‘volumeCount’) Audio.setMasterVolume(volumeCount);

Note:

  • This does not work in preview mode
  • This does not work in offline mode for chrome
  • This functionality works only when you host the course on a server

Comments

Post a Comment