Background Music Demo

Mar 24, 2015

Jackson Hamner
By Jackson Hamner

I made a demo featuring background music that goes through the whole course (doesn't change from slide to slide). The user can chose from four songs to listen to and can adjust the volume, and the song continues playing through every slide and loops when it completes. I've also added instructions on how to make this work to the module.

I don't know whether someone else has already posted something like this (I couldn't find anything), but hey if so here's one more!

 Demo

-------

I've put together a second demo that shows a different way to do this. This second version performs the same actions as the first one, but without needing to edit the output files every time you publish! It saves a lot of headaches when you need to edit something in the course because now you don't have to drop the music files into the output folder and you dont have to edit the html file every time you publish!

Demo 2

I've also attached the second version .story file. Its called Background_Music_Version_2.story.

If anyone needs help getting either versions of this to work I'm more than happy to assist :)

201 Replies
Christie Pollick
over 8 years ago10/06/15 at 4:18 pm (UTC)

You got it, Jane! I was just about to clarify that we were basically just hoping to see the .story file that you work in before you hit the Publish button, and that you should see a small, pinkish-purple "a" icon with your file name where you have saved the file (probably on your C: drive). Glad you got it sorted out! :)

Jackson Hamner
over 8 years ago10/06/15 at 4:41 pm (UTC)

Thanks Jane!

So firstly, the location variable goes back too far, the current one is:

"C:\Users\Jane\Documents\My Articulate Projects\test background music - Storyline output\story_content\WebObjects"

and all you need for that variable is:  story_content\WebObjects\6VUFHlYBLQO

The last bit, the 6VUFHlYBLQO part, can be found in the WebObjects folder after you publish your storyline file. If you ever add any additional songs or change the song that you included in the course you will need to find that folder again and update the variable with the new random string of numbers and letters.

Secondly, the trigger setting the song to start playing is missing. In your case, since it is just a single song, I would just lump that trigger into the same javascript trigger you already have to make it easier.

Use this trigger:

//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 = 1.0;
}

var player = GetPlayer();
this.Location= player.GetVar("location");

var audio = document.getElementById('bgSong');
audio.src=Location+"SONGNAMEHERE.mp3";
audio.load();
audio.play();

and replace "SONGNAMEHERE.mp3" with the real name of the song. The bold part of the script is the new part and you can add it to your trigger. This should get your music starting when the timeline starts.

Let me know if you run into any more issues! I hope this helps :)

Jane Jordan
over 8 years ago10/06/15 at 6:20 pm (UTC)

Hi jackson

Couldn't sleep so I got up and tried your solution - I must be missing a step as I couldn't get the music to play, have attached the source file and screen shots of my file locations and web object content and location. hoping you can help thanks Jackson

Jackson Hamner
over 8 years ago10/06/15 at 6:47 pm (UTC)

Hey Jane,

So I have to apologize, there was an error my previous post that stopped your file from working.

This is what I told you to set the variable as: story_content\WebObjects\6VUFHlYBLQO

It should have been this: story_content/WebObjects/6VUFHlYBLQO/

Notice that the slashes are facing the other direction and there is an additional one at the end. I corrected my mistake and your file started working! I attached the working file to this post so you can see this change.

Sorry about that! Let me know if you run into any more snags :)

Jane Jordan
over 8 years ago10/07/15 at 12:53 am (UTC)

Hi Jackson

everything working beautifully - just one thing I came across - when I left
the module and then came back into it where I left off I noticed there
wasn't any music!
Is this because we have the Java script on the first slide and so it
doesn't know if I come in at slide 11 to activate the script.

I guess I could put the Java script trigger on every slide or do you know a
quicker way?

Thanks again
Jane

Jane Jordan
over 8 years ago10/07/15 at 4:50 pm (UTC)

Hi Jackson
just wondered if you had a fix or some script for this issue - when the user moves to a different part of the course via the menu the background music stops. And when the user leaves the course Then returns to the course there is no music.
maybe it's not possible - so close

Jane

Sent from my iPhone

Jackson Hamner
over 8 years ago10/07/15 at 7:10 pm (UTC)

Hi Jane, sorry it took so long to respond:

I had never considered the returning to course or jumping around the menu! I think that the easiest way to get around this is to drop the javascript triggers into the slide master so they run on every slide in the background.

The problem with that though, is that if it runs on every slide then the song will restart every time the trigger fires. BUT I think there is a way around this!

So firstly, any of the javascript triggers you are using should be pasted into every slide master main page that you use in the course. That way no matter where the learner jumps in the music should continue start playing.

Secondly, we're going to need to edit the javascript so that it checks to see if there is already music playing before starting this song. This will help us avoid the problem of the song restarting every time the trigger runs.

You'll want to change this:

//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 = 1.0;
}

var player = GetPlayer();
this.Location= player.GetVar("location");

var audio = document.getElementById('bgSong');
audio.src=Location+"SONGNAMEHERE.mp3";
audio.load();
audio.play();

To this:

//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 = 1.0;
}

var player = GetPlayer();
var audio = document.getElementById('bgSong');
this.Location= player.GetVar("location");

if (audio.duration > 0 && !audio.paused) {
// If song is playing and not paused then do nothing
}
else {
audio.src=Location+"Happy.mp3"; 
audio.load();
audio.play();
}

This should check if the audio is playing or not, and if not then it will load the song again.

I haven't tested this yet and unfortunately I can't get around to it until later this week probably, so this is just a theory so far. I hope that it works though! Let me know if there's any problems with this and I can try to help as much as I can.

Sign In to Reply