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
Leslie McKerchie
7 years ago03/13/17 at 1:24 pm (UTC)

Hello Anne and welcome to E-Learning Heroes :) 

Not sure if Jackson is still subscribed here or not as this thread is a bit dated, but thanks for sharing your file so that the community can take a peek and assist.

If you do not hear back soon, you are welcome to reach out to the user directly via the 'Contact Me' option on the user profile.

Alexandria Laird
7 years ago03/13/17 at 1:43 pm (UTC)

Hello Anne,

I am by no means a JavaScript expert however, I have been working on applying this process to one of my own courses. Based on previous conversations in this thread I was able to get it working on my own course with this code:

//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+"NAME OF SONG HERE.mp3";
audio.load();
audio.play();

 

Using the code above at the JavaScript executed on the first slide has been working for me. You should be able to copy and paste it into your own trigger on that first slide. Make sure you edit the NAME OF SONG at the bottom. Additionally in your "location" trigger you only need to start at story_content. You do not need to include all of the information before that part. So the text in your location trigger should only be: story_content\WebObjects\6RU7elBBAGE

Hopefully these changes may be able to help you!

 

~Alex

 

Anne L
7 years ago03/13/17 at 10:39 pm (UTC)

Hi Alex,

Thanks so much for your help.

I have put your instructions into my file to try again but still not working. Just a couple of questions:

- In the location variable, should the path contain backslash or forward slashes. When I looked at Jackson's example, he had forward slash and you have back slash, so does it matter?

-

- Once I publish to get the web object number and copy to the variable, I save the file but if I publish again to play, the web object number will change, so I'm wondering if that is my problem ie. when I publish to test the audio, I am changing the web object number to the variable and therefore it is not working. If so, how do I start the project to test for the audio?

Hope I make some sense! Thanks for your help :)
Anne

Confidential communication
Westpac Banking Corporation (ABN 33 007 457 141)
Westpac Institutional Bank is a division of Westpac Banking Corporation

Alexandria Laird
7 years ago03/14/17 at 4:19 pm (UTC)

Hello Anne,

For the location variable you are correct, it should be the forward slashes (what I copied there was incorrect). You should correct the slashes to match Jason's example.

Secondly, I am not sure why the web object is changing. I believe once you have put it in and publish the first time it should remain named the same. I created mine and then published it many times to test it and have had no problems with the location needing changed.

A few other things to check:

- Make sure your song name in the script on your first slide matches the song file name exactly in the file you created the web object.

- Double check your location variable is accessing the correct web object and that the file name is an exact match.

I know this process can be frustrating, it took me quite a while to get mine working properly, but it is definitely worth all the effort once it works! Hopefully this helps!

~Alexandria

 

 

Alyssa Gomez
over 5 years ago09/19/18 at 9:08 pm (UTC)

Hi Joyce!

It sounds like you're looking for a feature that'll allow you to add background music to Storyline content that was published for MP4. 

While that's not a feature in Storyline, you can use a video editing tool like Replay to mix the video and audio together. I'd love for other community members to share how they've achieved this, too!

Sign In to Reply