setting a background music.

Apr 21, 2015


I’m trying to set up a background music in my project of Storyline 1.

Even though I dropped the mp3 audio file in the output file and inserted the necessary codes in notepad of html page, the music does not run.

What am I missing?



33 Replies
Kaan Saygı

Hi Jackson,

Few days ago, I already tried by inserting the codes of your thread in the notepad of the html page with the output folder and failed.

Can the reason be that ITunes and Media Player asked to install when I tried to run the mp3 file separately?

The recent codes I tried by inserting at the end of notepad are below:

<DIV id='divWebObjects'></DIV>

<audio src=””id=”bgSong” preload=”auto” autoplay loop></audio>

var audio = document.getElementByld(‘bgSong’);



var audio = document.getElementByld(‘bgSong’);

audio.volume = 0.6;




I also dropped the mp3 file in the output folder.




Jackson Hamner

All that you need to put into your HTML file is:

<audio src=”” id=”bgSong” preload=”auto” autoplay loop></audio>

Make sure this is placed somewhere inside the <body> tags, but outside any <script> tags.

The other things go into an "Execute JavaScript" Trigger that you can start when the first slide's timeline begins (or wherever / however you want to execute the trigger).

var audio = document.getElementByld(‘bgSong’);
audio.volume = 0.6;

NOTE: You want the "" to enclose the whole song name including the file extension

Ive included an example story file as well as a zip file that contains the WEB output of that example so you can see the HTML file and how its set up. I hope this helps!

Jackson Hamner
Ashley Terwilliger

Hi Kaan,

Yes, it looks like Jackson's file is an SL2 file, and therefore unable to be opened in SL1. I'm not sure if he's able to share an example within SL1, but hopefully he'll chime back in this thread and let us know. 


Unfortunately I do not have Storyline 1, only 2 :(

Is there a way I can convert it to a SL1 file?

Kaan Saygı

Hi Jackson,

I’m still failing.

Please see herewith the screencast of the html’s notepad sections.

Could you choose one in which the code <audio src=”” id=”bgSong” preload=”auto” autoplay loop></audio> should be inserted and arrow to the line with a bold marker?

Also could you post in this thread  screencast(s) of the dialog box of “Execute Java” trigger?

Thank you very much in advance,



Jackson Hamner

No problem! I can't do a screencast at the moment unfortunently, but I can try to go through it with screenshots!

So first, this is the line where you should insert the line in the html file.


There are technically a few other places you can put it in the file, but I always drop it there.

Remember that whenever you re-publish your story file you will need to go through and re-insert this line into the html file because every time you publish your course it overwrites that line. 


The JavaScript is this:


Then you publish, add that line to the HTML file, drop your song into the output folder and launch the course!

It should start playing automatically, if it isn't make sure your browser isn't blocking the JavaScript. You may need to click the "allow blocked content" button or something like that if it pops  up.

This discussion is closed. You can start a new discussion or contact Articulate Support.