How to Add Custom Volume Control in Articulate Storyline

Learn how to add custom volume control in Articulate Storyline for a better e-learning experience.
Learn how to add custom volume control in Articulate Storyline for a better e-learning experience.

When creating e-learning courses, there are times when you need to design and use a custom template and player instead of the default Storyline course player. However, in your custom player, you may encounter the challenge of not being able to control the volume slider. This can be a significant issue as learners need the flexibility to adjust the volume or mute the slide in a custom player.

In this guide, we will walk you through the process of adding custom volume control using JavaScript in Articulate Storyline. You can achieve this functionality in your courses with just three easy steps.

Note: Make sure to create everything in your Slide Master so that it works on every slide. To access the Slide Master, click on “View” => “Slide Master” => Select the top-most (Master Slide) and follow the steps below.

Step 1: Create Seekbar and Button

  1. Insert a Seekbar and change the variable name to “Slider1” to “volume”.
Insert a Seekbar and change the variable name to "Slider1" to "volume".
  1. Insert a Button and create a selected state for the button. Delete all other states except normal and selected. Set the volume icon for the normal state and the mute icon for the selected state.
Insert a Button and create a selected state for the button. Delete all other states except normal and selected. Set the volume icon for the normal state and the mute icon for the selected state.

Step 2: Set JavaScript Triggers

  1. Set up a JavaScript trigger to execute when the timeline starts on this slide. Paste the following JavaScript into this trigger.
  1. Set up another JavaScript trigger to execute when the “volume” variable changes. Paste the following JavaScript into this trigger.

Step 3: Set up Button and Variable Triggers

  1. Create a Storyline trigger: Set the state of the volume button to selected when the Volume variable changes. If the volume value equals 0, set it to normal.
Create a Storyline trigger: Set the state of the volume button to selected when the Volume variable changes. If the volume value equals 0, set it to normal.
  1. Create a Storyline trigger: Set the volume value to 0 when the user clicks on the Volume Button. If the state of the Volume Button is selected, set the volume value to 5.
Create a Storyline trigger: Set the volume value to 0 when the user clicks on the Volume Button. If the state of the Volume Button is selected, set the volume value to 5.

That’s it! You have successfully achieved volume control functionality in your Articulate Storyline course.

Video Guide:

Share this article
Shareable URL
Comments 5
  1. Do you have to insert the code and button in each slide?
    If not, what are the triggers to activate the Text-to-Speech file?

  2. Hi, this works great for volume control, but when a new slide starts its seems that the js on the beggining of the slide dont put the volume at the right level.
    For me the volume takes the initial value of the Storyline slider even if the “volume” variable keeps the right value. So my “volume” variable is at “1” but my sound plays at “5”. Have you a solution to this issue? Thanks for your help and this great job.

Leave a Reply

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

Read next