background music in Storyline

Hi Hima! Hopefully Kenny is still subscribed to this thread, but if not, please reach out directly via the 'Contact Me' option on the user profile.

If anyone still needs help with adding background music to play throughout a course, this works for me.

- After publishing your course, open the html5 file in a text editor

- In the code look for the end of the body section.  Look for the closing body tag </body>

- Just before this put in this audio code

<audio autoplay loop>

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

</audio>

- Save it and then you should be good to go

Thanks Andrew for sharing here. 

Hi Andrew,

Just an FYI that responding via email includes your signature here, and you're welcome to edit the post to remove that information if you wish. 

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.

Thanks for popping back in to share with the curious minds Andrew :)

Good stuff Andrew!

I'll play around with this approach as soon as I can, but have a couple questions: 

What did you do for the Volume button icon?

The volume button may function as a play/pause button yet also confuse visual behaviors when the expected icon is for volume is a speaker, whereas the icons for play/pause are the standard triangle for play and double-vertical bars for pause.

Have you found anything in the .css to point to or assign a different icon to that control?

Yeah, unfortunately its not the greatest solution since it does negate the volume button for the rest of the course.  As I work around I might have a narration sound mute button trigger on each slide.  The volume level slider I don't really miss.  I don't see a situation where the user would need to adjust the volume level(other than mute or unmute) using player controls.  I think most users adjust volume levels using the computer's volume control.  

I want to go test and play with this code now, but I can't just yet!

It's got me thinking about your JS code. Wonder if you could leave the default Player volume alone and apply that code to a button on a Master slide (global) that would still control the background music.

Hi - I desperately need to add background music to a project, but have no idea about code and I'm struggling with understanding some terminology.

I am sure I can cut & paste the code as directed, but what I don't understand is the instruction  "Where "1.wav" is the name of the audio file you want to use. The file must be in the root
directory with story.html"

How do I ensure that the file is in the root directory? 

I really need "dummies" instructions on the entire process or screenshots PLEASE.

Thanks