Solution for Looping Music in Storyline -Optional Mute/Unmute Button and Mute/Unmute on Specific Slides

I’d like to start with a disclaimer by saying that I have only tested this in html5 (not Flash) using Google Chrome. I am using Storyline 360 and this example was built using the Modern player style, published for LMS. You won’t be able to hear the music when Previewing in Storyline. You need to publish the course after following the steps from Part 1 before you’ll hear the music.

And it would not have been possible without drawing heavily from the previous work of Mateusz Szuter (https://community.articulate.com/discussions/articulate-storyline/tutorial-background-music-through-whole-course-controls) and Michael Hinze (see the first comment here https://community.articulate.com/discussions/articulate-storyline/change-states-when-object-is-clicked-on-multiple-times). Mateusz’s method works well for getting the music loop into the course, but the controls didn’t re-size or re-locate to fit the rest of the course when I re-sized the published course in a window or switched to a different screen size other than the one the course was initially built in/for. Michael’s button changed states the way I wanted for a mute/unmute button with variables, but it only worked on a single screen and didn’t “remember” the selection between slides.

This process expands on both of the ones above and allows you to:

1. Run one audio file of your choice on loop throughout a course
2. Let the learner mute/unmute that audio using a button that changes state to show if the audio is on or off at any given time and will re-size along with the rest of the course
3. Have the course remember the learner’s audio on/off selection across slides
4. Play or pause the audio on slides of your choice – For example, if there’s a video on a slide and you don’t want the looped music to clash with the video’s audio you can set it up so the looped audio will mute on that slide and then resume when the learner leaves it

This technically involves some JavaScript/jQuery, but you don’t need to understand it to make this work. As long as you can copy-paste you should be able to do this.

I’ve attached a sample zip file to this post for reference. It contains the .story file as well as the published, fully-modified output. For some, it may be easier to just look at the files. Please note this whole process involves working both within the .story file and in the published course folder. Hope this is helpful!

Part 1 - Getting Music Loop Into the Course

Follow Mateusz Szuter’s process from https://community.articulate.com/discussions/articulate-storyline/tutorial-background-music-through-whole-course-controls but skip step 2 completely and in step 3 skip/leave out the bottom line of code:

<span id="audio-player" class="audio-off"></span>

and use $('audio#myAudio')[0].play() as the Script for the Execute JavaScript trigger, rather than the script that’s listed under “EDIT 12.02.2019.” Make sure this Execute JavaScript trigger is above/before any Jump to Slide triggers that may already be present on the button, otherwise the trigger won’t work and the music won’t play.

Here are some additional tips/notes about this process:

• When you add a button in Storyline to play the music (due to browser politics requiring a click to play media) using an Execute JavaScript trigger, you can add that trigger to one of the navigation buttons (Ex. Next) in the player if you’d like. You don’t have to make a dedicated button for it from scratch.
• When you publish the course, don’t zip it. You’ll have to extract/unzip it to make the code changes so that’s just an extra step.
• You need to add your music file to the published file folder. Drop it in the main/root section. Don’t put it in a sub-folder.
• When you’re ready to put the file on an LMS/SCORM Cloud for testing you need to modify both story_html5.html and index_lms_html5.html. But if you want to start by testing locally, to save some time, you can just make the changes to story_html5.html.
• Make sure you save the changes to story_html5.html and index_lms_html5.html before you close them.
• In step 3 you replace “bg.mp3” with the name and extension of the music file you’re using. I worked with mp3, but in theory it should work with other audio file types as well.
• To test and see if the music loop is working, in the published folder, right-click story_html5.html and click Open with. Select Google Chrome (or whatever browser you’re trying this on, though again, I only tested it in Chrome). Remember, the loop probably won’t start automatically. You’ll need to click whichever button you designated to start it.
• You may want to sit through the whole song to confirm that it restarts after it’s done playing.
• If that’s all you need, you’re done! If you want the learner to be able to mute/unmute the music with a button that’ll re-size with the rest of the course and/or if you want to mute/unmute the music on specific slides keep reading.

Part 2 - Adding the Mute/Unmute Button

You can add this button to slides individually or add it to a slide master. I recommend using a slide master so you don’t need to re-create it over and over.

1. Start by creating a new variable. Name: music_click_counter (or something to that effect), Type: Number, Default value: Value 1.
2. IMPORTANT: Go back to the Execute JavaScript trigger from Part 1. Add another trigger after/below it. (This links the existing trigger to the new music_click_counter variable so it’ll work with the upcoming mute/unmute button and avoid things “getting out of sync”).
   Action: Adjust variable, Variable: music_click_counter, Operator: = Assignment, Value: Value 2, When: User clicks, Object: the desired button the Execute JavaScript trigger is already on.
3. Then create the button and design it so it looks the way you want it to. Give it an easy-to-identify name like music_button. In the reference file, the “off” state is the Normal state since the sample starts with the audio loop off by default.
4. Select the button, Edit States, duplicate the Normal state and call the new state On - or something to that effect. Edit its visual so it looks the way you want it to. Then click Done Editing States.
5. Add a trigger to the button. Action: Adjust variable, Variable: music_click_counter, Operator: + Add, Value: Value 1, When: User clicks, and Object: music_button. (See bottom trigger in image below).

Now you need to add a series of 7 slide triggers to tie the variable’s value to the button state and the looped music muting/unmuting. They need to be in this order, from top to bottom. (The 8th/bottom most is the trigger that was added in 5. above). 

1. (This one makes sure the button state “remembers” the Normal/off state if the learner had the music loop muted on the prior slide)
   Action: Change state of, On Object: music_button, To State: Normal, When: Timeline starts, Object: whatever the current slide/master is, On Condition: music_click_counter = = Equal to 1.00
2. (This one makes sure the button state “remembers” the On state if the learner had the music loop unmuted on the prior slide)
   Action: Change state of, On Object: music_button, To State: On, When: Timeline starts, Object: whatever the current slide/master is, On Condition: music_click_counter = = Equal to 2.00
3. (This one changes the button state to the Normal/off state if the learner mutes the music loop on the current slide)
   Action: Change state of, On Object: music_button, To State: Normal, When: Variable changes, Variable: music_click_counter, On Condition: music_click_counter = = Equal to 1.00
4. (This one mutes the music loop if the learner mutes the music on the current slide)
   Action: Execute JavaScript, Script: $('audio#myAudio')[0].pause(), When: Variable changes, Variable: music_click_counter, On Condition: music_click_counter = = Equal to 1.00
5. (This one changes the button state to the On state if the learner unmutes the music loop on the current slide)
   Action: Change state of, On Object: music_button, To State: On, When: Variable changes, Variable: music_click_counter, On Condition: music_click_counter = = Equal to 2.00
6. (This one unmutes the music loop if the learner unmutes the music on the current slide)
   Action: Execute JavaScript, Script: $('audio#myAudio')[0].play(), When: Variable changes, Variable: music_click_counter, On Condition: music_click_counter = = Equal to 2.00
7. (This one keeps the number variable from going beyond the values of 1 and 2 that are being used to control the button states and the music/JavaScript triggers)
   Action: Adjust variable, Variable: music_click_counter, Operator: = Assignment, Value: Value 1, When: Variable changes, Variable: music_click_counter, On Condition: music_click_counter = = Equal to 3.00

Part 3 - Playing/Pausing the Music on Specific Slides

The music_click_counter variable from Part 2 needs to be in place for this Part 3 to work as-written. You’ll be using Execute JavaScript triggers on navigation buttons to play/pause the music loop on specific slides. (It’s essentially the Execute JavaScript method from Part 1 with the additional trigger that was added after it in Part 2).

Make sure these triggers are above/before any Jump to Slide triggers that may already be present on the button, otherwise the triggers won’t work.

• To pause/mute the music loop for the following or preceding slide, place the following 2 triggers on the desired navigation button:
  
  1) Execute JavaScript, use $('audio#myAudio')[0].pause() as the Script, have it on click of the desired button.
  2) Action: Adjust variable, Variable: music_click_counter, Operator: = Assignment, Value: Value 1, When: User clicks, Object: Select whichever button you want to use.
• To play/unmute the music loop for the following or preceding slide, place the following 2 triggers on the desired navigation button:
  
  1) Execute JavaScript, use $('audio#myAudio')[0].play() as the Script, have it on click of the desired button.
  2) Action: Adjust variable, Variable: music_click_counter, Operator: = Assignment, Value: Value 2, When: User clicks, Object: Select whichever button you want to use.