Background Music Demo

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 :)

179 Replies
Dietmar Grasböck

Thanks to Jackson and as well all others for sharing this wonderful post :)

I needed to play an intro song at the first few slides which later stops at a certain slide. So I removed the loop in the HTML5 <audio> tag.

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

And, as I dont liked the abrupt ending of the song, I made a smooth fade-out with a javascript trigger:

var sound = document.getElementById('bgSong');

var fadeAudio = setInterval(function () {

// Only fade if not at zero already
if (sound.volume != 0.0) {
sound.volume -= 0.1;
}
// When volume at zero stop all the intervalling
if (sound.volume === 0.0) {
clearInterval(fadeAudio);
}
}, 400);

This works fine for me, but - to be honest - there is one thing, that bothers me. The Volume slider in the Storyline player has no influence to the <audio> song.

My question: Is there a way to forward the current level of the volume slider into other javascript variables?

I am grateful for any advice!

Regards,
Dietmar

Nadine Helm

Hi

 

I really like the option to add the sound as Jackson suggests. I need some help though - I can make out whats required in as far as the code entry goes, but I have no idea how to access the component where I can edit and insert the story file... 

Any help would really... well.. help!!! 

F Hammond

I have a question for the group: could anyone help me figure out how to play music across all the slides of just one scene?  I just want music during the interactions (a series of slides with drag and drop interactions), and I have all those slides grouped in one scene.  Any tips on how to get the music to start at the beginning of the scene and stop when you exit the scene would be greatly appreciated!

Alyssa Gomez

Hello Fletcher and Wendy! 

Although background music across a course is not a built in feature in Storyline, I wanted to share some resources to check out that may help you accomplish what you're looking to do:

Hopefully other folks in the community who have tried this before can share their tips and tricks, as well!

Alexandria Laird

Hello Jackson and Others, 

Previously I have had success with using the first method and adding background music to the final html output. However, I am running into issues with that method when using Storyline 360 so I decided to try and use the second method and put it directly into the project. Unfortunately I have now tried that a few times with now luck. I have uploaded the story.html output in hopes that one of you may be able to help. 

Thanks in advanced!

Ashley Terwilliger

Hi Keith,

It's not code that I can assist with, but if you'd like folks in the community to take a look can you share the code snippet that you included here with them? Also you said you were editing it in the story.html file and that's what is created when you publish for Web but you likely need to publish for LMS if that will be where you're ultimately uploading the published output.

Leslie McKerchie

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.