An audio on/mute button controlled by JavaScript

I have been using an on/off toggle button on all my eLearning slides to allow the learner the option of turning off the sound.  I thought I'd show how this works in case others need an on/off button for the audio track.

Without sound, the content is delivered exclusively from slides or in the Notes. Turning off the sound allows the learner some control of their experience, such as if they don't want the sound playing in an office environment.

I have been using a snippet of JavaScript that I found on e-learning heroes forum somewhere. I can show you what it does, and how to trigger the snippet, but I've no clue how it works on a JavaScript level.

I have two ways to toggle the audio on/off. One is by clicking a button at the top of the screen. The other is through the key combination Control-Alt-M (which you can set up). Having a key combination is ADA compliant for sight-challenged people (they don't need to click on something).

I created the variable varAudioOn and set it by default to true, so the audio plays whenever the course starts until it gets turned off.

I created an audio button (Insert > Button) with 3 states, one is the speaker symbol and the others with a line through the speaker or a "down" state. This is called the "Audio button" object and is the same on all slides.

Place your button where you want it before setting up the JavaScript trigger. I highlight the button object in the timeline and use the Size and Position controls to move it precisely. It seems that when adding the JavaScript trigger, the Audio button cannot be dragged onscreen, just positioned with Size and Position.

[By the way, I believe I chose not to set this button up on a Master slide because I think JavaScript won't run when the Audio button "lives" on a Master slide.  That seems like a logical choice so you don't have to copy it over and over, but t just wouldn't work for me. So I put it instead on all my slides as an object with 3 states.]

Wait until your JavaScript triggers are hooked up (i.e. typed out in Triggers) before copy/pasting, so the triggers will copy along with the object.

In the Triggers, I first had each slide check the status of the audio button when the slide begins, and then set the correct state or appearance of the button. Here's the logic:

1) If the audio was "on" for the previous slide, it should be audible

on this one.

2)  If the audio button state was in the OnState, then make the "Audio button" state  on this slide to show the "on" state. 

3) If the audio state on previous slide was "normal" = off, then show the off-state as this slide begins.

I also have a trigger to start the audio after .5 seconds on every slide.

For controlling the varAudioOn variable, I have these trigger sets:

After these triggers, there's the usual two triggers (not shown) for moving to the next slide with Next and the previous slide with Previous.

Inside the "Execute Javascript" (click on this link) you'll find this Javascript snippet that toggles the audio from audible to mute and back.

//mute/unmute

// Use the global DS object if it exists, otherwise try require:

varappState = window.DS ? DS.appState : require("helpers/appState");

appState.onToggleVolume();

Hope this is useful to somebody. It took me many weeks to figure this out.