Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

The latest release of Articulate Storyline 360 or Storyline 3 has number of exciting new features allowing eLearning developers to explore many more creative ways in developing new interactions.

Yet, we still have a few things that cannot be achieved using the native options of Articulate Storyline 360. One such, most requested functionality is, the ability to control volume of the course without the default storyline player. Our previous blog on how to achieve this functionality in Articulate Storyline 2 has helped many to include a volume controller in custom players. But, since there have been many changes done under the hood in Storyline 360. We need a new approach for this functionality to work. In this blog we will see how to add a custom volume controller in Articulate Storyline 3 or SL 360.

Step 1:

Insert a “Slider” or “Dial”.

Slider-Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

Dial-Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

Step 2:

Then, in the “Design Tools” set the values of the dial/slider as follows:

  • Start Value: 0
  • End Value: 1
  • Initial Value: 1
  • Step Value: 0.01

Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

Step 3:

Rename the slider/dial variable to “Volume”.

Variable-Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

Step 4:

Set a trigger to “Execute JavaScript” when “Slider moves” or “Dial Turns” based on the interaction that you are using.

Trigger-Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

Step 5:

Then add the following JavaScript to the trigger and hit ok.

_g.trigger("volume:changed", GetPlayer().GetVar("Volume"));

Javascript-Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

Step 6:

This is the last and most important step.

After you’ve published the course, in the published output, navigate to the following path:

Storyline output\html5\lib\scripts

Here, you will see a file named “app.min.js”. We need to replace this file with the modified file which you can download from the below download section.

Once, done you can go ahead and test your project.

Note:

This does not work in preview mode.

This approach is only for HTML 5 output. If you also need this functionality for flash output, you can use the method shown in our previous blog for articulate storyline 2.

Watch our tutorial video online:

10 replies
    • Swift Elearning Services
      Swift Elearning Services says:

      Hi Marko, Good to know that our code was helpful to you in designing the custom volume control. Thanks for sharing your experience.

      Reply
  1. Jack
    Jack says:

    It would also be better to document what changes need to be made to the app.min.js file rather than providing it for download. This is because updates to Storyline will likely impact the contents of this file and using an old version may create other unanticipated issues.

    Reply
    • Swift Elearning Services
      Swift Elearning Services says:

      Dear Dayanand,

      Thanks for posting your comments.

      Hope you have followed the steps in the blog.

      Can you please share the below details:
      – Storyline version and update?
      – If possible share the working file sample for investigation.

      Looking forward for your response.

      Thankyou.

      Reply
      • dayanand
        dayanand says:

        Hi,
        Thank you for your Response, I have followed the same steps that you are mentioned in post. The module is working fine in IE browser version : 11.0.9600.19035, Update version: 11.0.65. But problem is with the chrome browser. Module is not loading after replacing the min.in.js file.

        Currently we are using stroyline 3 Update 4: 3.4.15731.0

        Reply
        • Swift Elearning Services
          Swift Elearning Services says:

          Hi,

          Thanks for your reply and sharing the requested information.

          We replicated shared instance in our testing and this occurred due to the chrome browser updates. The updated “app.min.js” JavaScript file will be shared soon.

          Thanks again for sharing your comment here.

          Reply
  2. dayanand
    dayanand says:

    Great !!!
    Please let us know when you shared the updated JavaScript file.

    Thank you once again for your support..

    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 *