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:

  1. Create a variable in Storyline “muteToggle” and set default value to False.Storyline_muteToggle
  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.
  3. Add two triggers in the “Action” panel as shown in the below Screenshots.Storyline_muteToggleStoryline_muteToggle
  4. Add two triggers:
    a.Adjust Variable “muteToggle” to “True” when user clicks audio button if audio button state is selected.
    b.Adjust Variable “muteToggle” to “False” when user clicks audio button if audio button state is NOT selected.Storyline_muteToggleStoryline_muteToggle

Steps to perform this functionality – HTML5 based output:

  1. For HTML5 version, use JavaScript to trigger an action. From the list of triggers, select the trigger as “Execute JavaScript”
  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

Watch our tutorial video online:

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

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 *