Background Music Demo

Hi Marcee,

Since opening the html document is causing you problems I would suggest going with the Version 2 option.

1. Create a variable in storyline called 'Location'
2. Create a folder on your desktop, it can be called whatever you'd like.
3. Put all of the music files you want to play in your course in this folder
4. create a new file in the folder called 'index.html'. This file can just be blank

5. Back in your storyline, create a new slide that the learner will never see

6. Create a web object in that slide and link it to the folder you just created with the blank index.html file in it. Make sure to set the web object to load automatically. 

7. Publish your file (dont zip) and open the output folder
8. Check under story_content/WebObjects folder and copy the name of the web object folder in there. It will be a series of random characters like 'W7auf51LmL'

9. In storyline set default value of the 'Location' variable to the path whole path 'story_content/WebObjects/[web object name]'

10. Create a trigger that executes javascript when your project starts.
11. paste this javascript into your trigger, it will edit the story.html file for you:

//load the scripts dynamically into the head of the document
function add_line() {
 var line = document.createElement("audio");
 var head=document.getElementsByTagName('body')[0];
 line.type = "audio/mp3";
 line.src="";
 line.id="bgSong" ;
 line.autoplay = true;
 line.loop = true;
 head.appendChild(line);
}
//but we only want to add these once!
if(document.getElementById('bgSong')==null){
 add_line();
var audio = document.getElementById('bgSong');
audio.volume = 0.5;
}

12. Now you can play your songs with a trigger like this:

var player = GetPlayer();
this.Location= player.GetVar("location");
var audio = document.getElementById('bgSong');
audio.src= location + "SONG1.mp3";
audio.load();
audio.play();

remember to change 'SONG1.mp3' to whatever the music file you added was named.

You can adjust the volume (for narration or sound effects or whathaveyou) with this trigger

var audio = document.getElementById('bgSong');
audio.volume = 0.6;

That should get it working for you, let me know if you run into any more problems!