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
Jackson Hamner
over 8 years ago08/14/15 at 3:50 pm (UTC)

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!

Jackson Hamner
over 8 years ago09/08/15 at 4:15 pm (UTC)

If you want to stop the song you can run this trigger at the end of the scene or beginning of the next scene.

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

This will set the song to nothing, so it wont play anything.

If you want to change the music use the same trigger and set audio.src to loctation + the name of your song. You can control when and what song is playing throughout the course.

I hope this helps! Let me know if you need any assistance getting it to work :)

Adam Gagne
over 8 years ago09/08/15 at 6:38 pm (UTC)

Thanks so much.  I used this code to have the audio run in the background and it worked great: 

<audio src="jazzfrenchy.mp3" id="bgSong" preload="auto" autoplay loop></audio>

I then added this exact code as a trigger to be executed when the scene ends but it didnt work:

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

I am in no way a coding expert.  Any idea what I am missing?

Jackson Hamner
over 8 years ago09/08/15 at 8:23 pm (UTC)

You're right, I was confused with what I did in the past to make this happen. What I did was not stop the audio but turn the volume all the way down.

So this trigger should stop the music from playing:

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


When you want the audio to start playing again you can set the volume back up.

Jane Jordan
over 8 years ago10/05/15 at 10:57 pm (UTC)

Hi Jackson

I have followed your background_music_version_2.story and loaded the java script as you had although I only have one song to play - however it didn't work - I know I must be missing something but not quite sure what it is

I have attached my file hoping you can help.

 

Jane

 

 

Jackson Hamner
over 8 years ago10/05/15 at 11:05 pm (UTC)

Hi Jane,

Would you be able to share your .story file so I can see how you've set up your triggers? That would help me pinpoint the error much easier.

I can see in your output files that the trigger adding the <audio> tag is working, but the trigger adding the src value for the audio tag didn't since the src="" is still empty. I would start by looking at that trigger to see if there is a problem with the code.

Since you are only using one song I would just hard code the song name into the audio tag when its initialized so you don't have to set up additional triggers. If you can share your .story file I can help you set up the script to do this

Christie Pollick
over 8 years ago10/06/15 at 1:15 pm (UTC)

Hi, Jane! I see that you replied to Jackson via email, and I wanted to note that if you try to add an attachment when replying via email, unfortunately, it will not appear here in the thread to be accessible. 

I also wanted to clarify that what Jackson would like to see is the .story file (or the source file itself) rather than the published output file, and the easiest way to share that would be to stop over into the forum/the thread, and click on the grey "ADD ATTACHMENT" button in the bottom left corner of the reply box. You will be able to browse for your file from there, and it will appear here in the thread. Please let us know if you have any other questions! :)

Jane Jordan
over 8 years ago10/06/15 at 3:33 pm (UTC)

Hi Jackson

here is my source file - if you wouldn't mind taking a look at what is missing to make the background music JS work.

Is it also possible to have the java script not execute on one slide or scene in the project, I will have video inserted and it already has background music?

thank you much appreciated

Jane

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

Hi Jane,

It is possible to stop the music and resume it while the video is playing. If you execute this javascript trigger it will mute the music:

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

and to resume the music:

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

The file you shared is actually the zipped output file, what I need is the test_background_music.story file. The file that you open in Storyline to edit the course is the file I need. I cannot open any zip files into Storyline. 

Sign In to Reply