Background Audio Cool Trick

May 23, 2016

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!

Pinned Reply
Luciana Piazza

Hello, Everyone! ✨

I'm happy to share that we have released a new update for Storyline 360 (Build 3.79.30834.0).

In this update, we have an enhancement where:

As a first stepI recommend updating Storyline 360 to the latest version. Here's how:

Update Authoring Apps

If you have any questions, please let us know in this thread or privately in a support case.

Have a great day! 

279 Replies
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!

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.

Dave Cox

Hi Emily,

This is so cool! Thank for posting this. I'm am definitely adding this to my library of tricks.

Hi April, 

Just FYI, I tested this in IE 11, and it worked fine for me.

Hi Tara,

Yes you can adjust the volume. It just requires some additional code. To make this work I changed the audio statement to include and ID:

<audio id="myAudio" src="bensound-jazzyfrenchy.mp3" preload="auto" autoplay loop></audio>

Next, we need a volume control, so I added a very simple HTML volume control on the next line after the audio tag:

<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

And finally, we the the SetVolume function referenced by the volume control that we just added. Place this script in the head section. I placed it right after the default script block.

<script>
function SetVolume(val)
{
var player = document.getElementById('myAudio');
console.log('Before: ' + player.volume);
player.volume = val / 100;
console.log('After: ' + player.volume);
}
</script>

I've included the modified file for you to look at.

Dave Cox

Hi Wendy,

Add this script to the head section of the story.html file:

<script>
function SetVolume(val)
{
var player = document.getElementById('myAudio');
console.log('Before: ' + player.volume);
player.volume = val / 100;
console.log('After: ' + player.volume);
}
function PauseAudio() {
var player = document.getElementById('myAudio');
player['pause']();
}
function PlayAudio() {
var player = document.getElementById('myAudio');
player['play']();
}
</script>

Remove autoplay from the audio tag, so that it looks like this:

<audio id="myAudio" src="bensound-jazzyfrenchy.mp3" preload="auto" loop></audio>

This will cause the audio file to load, but not start. Now all you have to do is call PlayAudio(); from a javascript trigger in your storyline file. You can also call PauseAudio(); to stop the audio.

I Modified emily's file to add a volume control and play and pause buttons.