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
charlene neale
over 7 years ago08/18/16 at 7:43 am (UTC)

Hi Anik,

I'm not sure if you have already tried this JS, it was posted here previously and works brilliantly:

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;

Good luck with your project,

Charlene

Dietmar Grasböck
over 7 years ago08/23/16 at 2:02 pm (UTC)

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

K P
over 7 years ago12/09/16 at 11:43 pm (UTC)

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
over 7 years ago12/12/16 at 3:02 pm (UTC)

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
over 7 years ago12/14/16 at 7:27 pm (UTC)

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-Pollard
7 years ago02/27/17 at 9:57 am (UTC)

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.

Sign In to Reply