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!



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

174 Replies
William Huang

So here is the problem.  This method doesn't work on Safari because Safari doesn't support volume control from javascript.  See  I think the best way for use your code to play mp3 files with volume set to 1 (max volume) , and encode the desired volume using editing the audio file.    Eg. 3 versions of the mp3 loud, medium and soft, and just switch files when you use the volume slider.

Lubna Thabseem

Hi, Jackson, 

Is it possible to have the background music play across layers, if I wanted to add interactivity in the middle of the video?

I'm creating an animation that has the same audio continue across multiple layers on a single slide. I want to add a button feature on one of the slides without interrupting the animation on these layers. At the same time, I want the button to take the user to a certain layer. Is this question clear? 

I'd really appreciate your help. 



Will Findlay

I downloaded the Background_Music_Version_2.story example file, and published and tested it and was flabbergasted to find that it worked! How is that possible when all I had was the .story file and hadn't set up additional folder with the mp3 files? Are the mp3 files being pulled into the .story file somehow? 

I just can't figure out how this is working when I never set up the additional folder with the index.html file and the mp3 files.

Will Findlay

Thanks pyxi! I think what surprised me is that when you point to the WebObject folder on your local drive, it is actually importing that folder INTO your .story file

Here is how to verify this: If you change the extension of your .story file to .zip you can explore the content of the project. Double click the zip, and navigate to this folder:


In the folder, you will find a file that ends in .bin. This is a binary file (noneditable) that contains the items that were in the folder you pointed to when inserting the Web Object. 

Stefan K.

Thanks four your input! It works for me! Just one question:

It only works for me, if the trigger for point 12 deals with "If user click on...". When I set up the trigger e. g. "When timeline reach sec 2, than execute javascript", it does not work. Is this normal?

See below.