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

182 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. 

Anderson Rumuy

Hi Alex,

After tried this code, I thought there is a better way to add background music

I think manny of us also use this methode so I prefer this one because more simple

Edit the output of Course Publish and add this JS:

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

1. Right click on the html5 & open with Notepad or Notepad ++ 

2. add this js into html5 output right between the <body> and <!-- 360 --> like this picture below: 

Can Edit via Notepad or Notepad ++

3. Save & exit

And don't forget :

1. to change the "1.mp3" to your audio file name. Mine is 1.mp3

2.paste "1.mp3" into the publish output folder where you edit the hmtl5


Lauren Connelly

Hi Brett!

Since this post is dated, Jackson might not be subscribed anymore. You could always reach out to Jackson using the "Contact Me" button in their profile.

Secondly, I'm looking at the previous comments and this seems to be a workaround for having continuous music throughout the course. Since this isn't something we currently support, I'm going to let our community members chime in!

ioulia Kornberg

I know this is a VERY old post but I'm trying to do the same with no luck.  

Please note that I don't know anything about coding, I'm just following instructions!

I am publishing to LMS using SCORM 1.2.  I tried to add this Javascript (see bold)

<body style="background: #282828" class="cs-HTML theme-unified">
<audio src="NAMEOFFILE.wav" id="bgSong" preload="auto" autoplay loop></audio>
<!-- 360 -->

I'm still getting NO audio.  Anyone have any thoughts?

ioulia Kornberg

Hi Jackson,

I know this thread is old, but I followed all the steps using this page and also Mark Sperman's YouTube video which walks you through all of your steps above (see:

Unfortunately, it's still not working for me.

I am sharing my Storyline 360 source file here. Would you be able to take a look to see what is wrong?

Let me also ask if I was supposed to do anything different besides publish the course as normal to LMS using SCORM 1.2?  I did that, but no audio plays when I preview it, or when I double-click story.html. I even published it to my LMS, and still nothing.