background music in Storyline

It's not a perfect solution, but it works for the right course.  I basically turn the player volume control button into a play/pause button for the background music.  Then if you want to control the volume for the course narration or sound effects you could build another volume control button on the slides themselves.  Or users can just control their computer volume.

So here's the best I've come up with:

1.  Open the story_html5.html file

2.  In the audio tag give it an "id".  You can give it whatever id name you want(I just chose "bg-music").  So the audio tag would look something like this:

<audio autoplay loop id="bg-music">

   <source src="yourmusicfile.mp3" type="audio/mpeg">

</audio>

3.  Find the volume control.  The code looks like this:

<div id="control-volume" class="controlbar-button compact"><a class="icon volume half"></a></div>

Notice it already has an id of "control-volume"

4.  Before the end of the <script> section, look for the </script> tag.  Add in this bit of code:

var volume = document.getElementById('control-volume');

volume.onclick = function toggleAudio() {
var theAudio = document.getElementById('bg-music');
if (theAudio.paused) {
theAudio.play();
}
else {
theAudio.pause();
}
}

Basically what this is does is create a function that turns the volume control button into a play/pause button.

5.  You also need to open the player.css file to change some styling to remove the volume slider. You may not have to actually change all of these, but just to be safe I did.  You can play around with it a little if you want.

- Comment out or delete:

.controlbar-button.compact.volume-open

and

.volume-handle

- Change display to "none" for:

.volume-slider

and

.volume-open .volume-touchpad

and

.volume-open .volume-slider

Its not as much of a hassle as it may look.  Let me know if there any problems or if someone has a better solution.