Custom Audio Controller Using Toggle Button – Mute Or Unmute Volume

January 24, 2018 12:00 pm

Custom Audio Controller Using Toggle Button – Mute Or Unmute Volume

In this video, you will learn how to create Custom Audio Controller Using Toggle Button.
Click the reference link to preview or download the sample.

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 a 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 a default value to False.
  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.
  4. Add two triggers:
  • Adjust Variable “muteToggle” to “True” when a user clicks the audio button if audio button state is selected.
  • Adjust Variable “muteToggle” to “False” when a user clicks audio button if audio button state is NOT selected.

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 JavaScript (Find in the reference link) code/* mute/unmute all audios and videos */

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.