Background Audio in Storyline 3

Apr 09, 2019

Hi All,

Just wanted to share a way to add audio across all slides in Storyline 3 (not tested with 2 or 360 ). There are quite a few posts here about this but none of them worked for me, thanks to the Google Chrome's new policy about the audio autoplay. 

**Please note that this is just a workaround, and not a built in feature of Storyline 3.

Here are the steps:

1. Publish your course

2. If your audio file is .mp3 then convert it to .m4a (so that IE doesn't download the file). Then, paste the converted .m4a file in the output folder.

3. Open the story_html5.html file with Notepad

4. Scroll to the bottom and add this code before/above the </body>

<!--- Adding background music-->
<iframe src="bg-music-low.m4a" allow="autoplay" id="iframeAudio" style="display:none"></iframe>
<audio id ="myAudio" src="bg-music-low.m4a" autoplay="true" loop></audio>
<script>
//check if the browser is IE

function isIE() {

ua = navigator.userAgent;
/* MSIE used to detect old browsers and Trident used to newer ones*/
var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

return is_ie;
}
/* remove the iframe or audio depending on IE or not */
if (isIE()){
$("#iframeAudio").remove();
}else{
$("#myAudio").remove();
}
</script>

That is it.

Phew!!!

I have tested this only for the offline version. Not sure how well it will work on an LMS. Would you guys let me know? 

5 Replies
Darin Fennell

I saw your background music solution and gave it a try. However, I could not get it to work. I created a simple module and published it. I copied your code and placed it in the published html file at the bottom before the </body> tag. I changed the name of the music file to the one I am using. I made sure to place the music file in the published folder. I played the html5 file in Chrome, but no music. I have attached a copy of my module with the code and music. Your feedback would be appreciated. Thanks.

Eric Santos

Hi everyone!

I have some great news to share. We just released another update for Storyline 360. In Update 74, we've included important fixes and new features.

One of the new features we've included is: 

  • Create immersive experiences with continuous background audio that sets the tone and keeps learners engaged.

Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

Please let me know if you have questions!