Articulate Storyline: Custom Audio Controller Using Toggle Button

Custom Audio Controller_Storyline

Articulate Storyline, an easy to use rapid eLearning authoring tool that comes with many in-built interactivities and is highly customizable. By default in Storyline the audio control button has a fixed position with no options available in the settings to change it. Due to this limitation, it was challenging for us to customize volume controls. To overcome this challenge, we created a “mute/unmute” custom toggle button as a part of requirement from one of our clients.

Let’s delve into our intervention of “mute/unmute” customization.Here are the steps:

The custom button is compatible with following platforms:

  1. Flash-based output (PC’s, Laptop) and
  2. HTML5 based output (Mobile, iPad, Tablet)

For Flash version, we have used an swf file in the Master slide to control the volume toggle feature. And for HTML5, we have used JavaScript in the Master slide to control the volume toggle.

Flash-based output:

 

Step1

Create a variable in Storyline “muteToggle” and set default value to False.

Storyline_muteToggle

Step 2

Insert the “muteToggler.swf” file into the Master slide. This single swf on the Master slide saves your efforts of adding button on each slide.

Step 3

Add two triggers in the “Action” panel as shown in the below Screenshots.

Storyline_muteToggle

Storyline_muteToggle

Step 4

Add two triggers:
Adjust Variable “muteToggle” to “True” when user clicks audio button if audio button state is selected.
Storyline_muteToggle

Adjust Variable “muteToggle” to “False” when user clicks audio button if audio button state is NOT selected.

Storyline_muteToggle

Steps to perform this functionality – HTML5 based output:

 

Step 1

For HTML5 version, use JavaScript to trigger an action. From the list of triggers, select the trigger as “Execute JavaScript”

Step 2

Next, insert the below JavaScript code/* mute/unmute all audios and videos */
var allAudios = document.getElementsByTagName(‘audio’);
var allVideos = document.getElementsByTagName(‘video’);
if (allAudios.length > 0 && allAudios[0].volume > 0) {
for (var a = 0; a < allAudios.length; a++) {
allAudios[a].volume = 0;
}
} else {
for (var a = 0; a < allAudios.length; a++) {
allAudios[a].volume = 1.0;
}
}if (allVideos.length > 0 && allVideos[0].volume > 0) {
for (var a = 0; a < allVideos.length; a++) {
allVideos[a].volume = 0;
}
} else {
for (var a = 0; a < allVideos.length; a++) {
allVideos[a].volume = 1.0;
}
}

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

[sociallocker]Click to /  to see how it works.[/sociallocker]

Watch our tutorial video online:

Subscribe to our channel for more videos at: youtube.com/elearningserv.

Our Services: eLearning Development, Flash to HTML5 Migration Service, Rapid e-learning Development

2 replies
  1. Joanna
    Joanna says:

    Hi guys

    I’ve just downloaded your SL file, deleted the audio and inserted my video.
    Unfortunately mute/unmute button doesn’t work (tested as output on Articulate Review and on SCORM cloud). Can you help with any solution please.

    regards
    Joanna

    Reply
    • Swift Elearning Services
      Swift Elearning Services says:

      Hi Joanna,

      Thanks for sharing your requirement, we will check and get back to you with an update.

      Please share the Storyline version currently you are using for the development.

      Thankyou.

      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 *