How to Create Custom Volume Controls in Articulate Storyline 2?

Custom Volume Control Storyline

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

Storyline2 Slider Settings

 

 

 

 

4. Add triggers to the slider as shown below

Articulate Storyline2 Triggers

 

 

 

 

 

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’)
    Audio.setMasterVolume(volumeCount);

Articulate Storyline Wizard trigger

 

 

 

 

 

 

 

 

 

 


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
20 replies
      • Nick
        Nick says:

        Hi Godwin,

        It doesn’t work with either chrome 60.0.3112.101 or opera 47.0.2631.71 without flash. In firefox I even can’t use slider itself (doesnt’t matter for me)

        Reply
        • Swift Elearning Services
          Swift Elearning Services says:

          Hi Nick,

          In Firefox it seems to have some limitation with the slider.
          You can use the below script instead to control the volume in latest browsers:
          $(‘audio’).prop(‘volume’,’0′) // to mute
          $(‘audio’).prop(‘volume’,’0.8′) // to unmute
          you can use any decimal number between 0 and 0.8 to increase and decrease the volume.
          Hope this helps.

          Reply
          • Nick
            Nick says:

            Thank you! It works fine for me.
            Also I wrote the same for video.
            The variable volumeCount is not needed. Just use volumeSlider with parameters: start-end: 0-1; step 0.1; initial: 0.8
            So you don’t need use dividing by 10.

            var player=GetPlayer();
            var v_volume = player.GetVar(“volumeSlider”);
            Audio.setMasterVolume(v_volume);

            $(‘audio’).prop(‘volume’,v_volume);
            $(‘video’).prop(‘volume’,v_volume);

            Reply
    • Swift Elearning Services
      Swift Elearning Services says:

      Hi Marko,

      You can use the below script instead to control the volume in latest browsers:
      $(‘audio’).prop(‘volume’,’0′) // to mute
      $(‘audio’).prop(‘volume’,’0.8′) // to unmute
      you can use any decimal number between 0 and 0.8 to increase and decrease the volume.
      Hope this helps.

      Reply
    • Swift Elearning Services
      Swift Elearning Services says:

      Hi Dylan,
      You can use the below script instead to control the volume in latest browsers:
      $(‘audio’).prop(‘volume’,’0′) // to mute
      $(‘audio’).prop(‘volume’,’0.8′) // to unmute
      you can use any decimal number between 0 and 0.8 to increase and decrease the volume.
      Hope this helps.

      Reply
  1. lizzie
    lizzie says:

    I am so lost – I have tried everything to get this to work.
    tested the preview link on all browsers and it works, but if I download the source file and republish it doesn’t appear to work any more.
    I tried adding in the code:
    $(‘audio’).prop(‘volume’,’0′) // to mute
    $(‘audio’).prop(‘volume’,’0.8′) // to unmute
    I put it underneath the original code
    But this did not work.
    I cannot work out what is wrong – any help greatfully appreciated

    Reply
    • Swift Elearning Services
      Swift Elearning Services says:

      Hello Lizzie,

      Think I found the issue. It can be the single quotes creating the trouble. Sometimes when we copy and paste code from a web page, single quotes ( ‘ ) in the code will be pasted in a different format which causes errors in JavaScript.

      The simple fix for this problem is, after you paste the code in Articulate Storyline, just delete and retype all the single quotes and it should work fine.

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *