Background Audio Cool Trick

Hi All,

Just wanted to share a way to add audio across all slides in Storyline 2 There are a few posts on here about this, and I found this method to be super simple.

**Please note that this is just a cool trick, and not a built in feature of Storyline 2.

Publish your course, open the story.html file with Notepad, scroll to the bottom and add this code

<audio src="YOURAUDIOHERE.mp3" preload="auto" autoplay loop></audio>  with a space before the </body> and place your audio file into the published output folder and there you go. That is it.

Here is an example, http://bit.ly/1sy5dkV  and the output folder is attached.

Have fun!

199 Replies
Milene Below

Basically, I am publishing the content to my local drive, adding in the music script, etc.  I then place the published folder in our public network drive (S:drive) for our IT folks to upload to our Intranet web server.  When clicking the story.html file from the S:drive, it doesn't play the music.  For kicks and grins, I placed the music code in the sotry_html5.html folder and when I click on that, it plays.  We tried linking to that file on the web server but all it does is play the music and we get a blank display. 

Laura Hathaway

Wondering how to add the code in HTML and .mp3 file when publishing from Storyline 360 to manually upload to Articulate Online. I have the publish settings ready in SL360, but when I try to open the HTML file I get nonsense, and Word won't even open the SL1 file. There is also no folder or anywhere to drop the .mp3 for upload... any help?

Emily Ruby

Hi Laura,

Are you using the method described here for modifying the output for Articulate Online? I have tested Articulate Online with this from Storyline 2, and was able to get it to work. I have not tried in 360 yet, but I will let you know as soon as I can.  Once you extract the folder from the method above, you should be able to open it with Notepad.

i will check back in once I play around with Storyline 360.

Laura Hathaway

Thanks so much Emily! I am trying to upload to Articulate Online manually, and the first barrier I find is that the output is a single .SL1 file which I can't open. I'm also guessing I need to upload the .mp3, but don't see how that's possible!

Again, I really appreciate your taking the time to look at this!

Laura

Sent from my iPhone

Emily Ruby

Hi Laura,

You will need to extract the sl1 files before being able to make any changes. You can watch the video in the link I shared above on how to do this.

However, I did just test this in 360, and using web publish and AO publish, it is not working the same. I will try and play around for a bit to see if I can get something to work. This was just a cool trick I stumbled upon, so hopefully I can find a way to make it work in 360 :)

CAllum Bateman

Hi Emily

Thanks for the trick! I have a question in response to your earlier post below:

"This method should work with LMS in the same way. You should not need to add anything to the index.lms. Just add it to the story.html file. I just ran mine through SCORM Cloud to check, and it worked the same."

I'm trying to get a background audio track to play with the LMS output but can't get it to work. It works with the web output and also when I play the html5 file on my computer but as soon as I upload to scorm cloud or our LMS it no longer picks up the mp3 audio file. Do you have any suggestions as to why that might be?

I have zipped the whole file and stored the mp3 in that file as well.

Thanks!

Leslie McKerchie

Hey Callum - As Emily mentioned above, it was a cool trick that she found and not something we support nor is it a feature of Storyline. Hopefully someone will be able to chime in and assist here and I wanted to link to your similar thread for anyone following along in case you get assistance there as well.

Belle Whittington

Emily, thank you for this article. :-)

I've spent quite a lot of time trying this trick. But with no luck. I published my project as Web output. I want to use this on my website to promote business.

This is what I've added as the code in Notepad and I've saved it as Unicode (is that correct?):

</div>
<audio src="bensound-anewbeginning.mp3" preload="auto" autoplay loop></audio>
</body>
​</html>

Can someone offer advice? I so want this to work.

View the project here for reference.

Help, please!

SCOTT SARE

A few things you always need to check, double-check, then check again.  This is just a start, hope it helps.

  1. Is the file name and format in the code the same as the actual audio file?
  2. Is the audio file in the same folder (location) as the *.html file?  If in a different folder or directory then your code needs to point to that location.
  3. If viewing in a browser did you refresh your screen before testing? 
  4. Are you in "preview" mode or are you viewing your work in production?  Some elements will not work in preview.
Emily Ruby

Hi Bruce,

I have not come across a way to adjust the audio levels. Hopefully someone on here will figure that one out soon.

Belle - you should add a space before and after the line of code. Let me know if this work for you. 

</div>


<audio src="bensound-anewbeginning.mp3" preload="auto" autoplay loop></audio>


</body>
​</html>

Let me know how this works out. Also I noticed that you are using HTML5 - From what I have seen here this trick is not working the same for HTML5 - as far as mobile viewing.  Lets see if the updated code works on a browser with HTML5 - I will run a test on my end as well.

Thanks!

OWEN HOLT

I use the following JavaScript to load the music on time line start and later adjust its volume:

//load the scripts dynamically into the head of the document
function add_line() {
var line = document.createElement("audio");
var head=document.getElementsByTagName('body')[0];
line.type = "audio/mp3";
line.src="";
line.id="bgSong" ;
line.autoplay = true;
line.loop = true;
head.appendChild(line);
}

//but we only want to add these once!
if(document.getElementById('bgSong')==null){
add_line();
var audio = document.getElementById('bgSong');
audio.volume = 0.1;
}

//I use a "hidden" web object slide to load my music dynamically. Once I publish the first time, I copy the path to the music file (or files) into a variable titled "location". This is important for the following lines of JavaScript to work.
var player = GetPlayer();
this.Location= player.GetVar("location");
var audio = document.getElementById('bgSong');
audio.src=Location+"Background.mp3";
audio.load();
audio.play();


Then, to adjust the volume, I added 2 buttons (up volume and down volume). The action on the buttons is to adjust a variable (CurrentVolume for example) up or down by increments of 10 as long as it doesn't exceed 100 on the top end or 0 on the bottom.

Next add actions to execute JavaScript if the CurrentVolume variable is equal to each possible volume. 

For example, if current volume variable is adjusted to equal 50, your JavaScript would be the following:
var audio = document.getElementById('bgSong');
audio.volume = 0.5;

This adjusts the volume to 50%

Janice Pericich

I don't do html coding but I did try this also and it did not work for me.  Does this look right?

</div>
<audio src="27TearsInHeaven.mp4" preload="auto" autoplay loop></audio>

</body>
</html>

I'd like to do this for a class reunion for the people who have passed away.  I don't get any sound, however, and my music file in in the same folder as the html file.