How to Create Custom Volume Controls in Articulate Storyline 2?

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.GetVar(‘volumeCount’)



  • 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


Views: 58

Add a Comment

You need to be a member of the Learning and Skills Group to add comments!

Join the Learning and Skills Group


Sponsor promotion

LSG Sponsors

© 2018   Created by Donald H Taylor.   Powered by

Badges  |  Report an Issue  |  Terms of Service