Background Audio Cool Trick

Emily Ruby
By Emily Ruby

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!

248 Replies
Dave Cox
over 3 years ago05/05/17 at 11:29 am (UTC)

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
over 3 years ago05/05/17 at 12:17 pm (UTC)

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.

OWEN HOLT
over 3 years ago05/05/17 at 2:45 pm (UTC)

I still believe using JavaScript to modify the HTML code at StoryLine launch is a better method than modifying the published output every time you publish.  Save yourselves the headache! Set it, and forget it!
Link to my post in this thread.
Link to additional discussion thread.

I'm more than happy to walk anyone through the JavaScript associated with this alternative method so that you can do more than copy and paste it, you can understand it. :)  Just ping me.

Kathy Robertson
over 3 years ago06/09/17 at 10:06 am (UTC)

Emily this is brilliant - thank you. It hasn't worked for the particular project I'm working on at the moment as I have different music clips on some slides, and I just wanted to fill in the silences with one background tune, but I then get both tunes playing which I don't want.

I will definitely use this method in the future though.

Robert Rabe
over 3 years ago06/12/17 at 6:59 pm (UTC)

Hi Emily! 

Great post! Tried it and it worked perfectly. I do have one question. Is it possible to have audio start on different slide. For example after the first slide have the audio begin. I'm just starting to learn HTML so I'm not highly advanced yet. Any info would be much appreciated. Thanks!

Ashley Terwilliger
over 3 years ago06/22/17 at 1:00 pm (UTC)

Hi Rovie,

Due to some changes in the published output based on Storyline 3 and 360's shift to allow for HTML5 first/only publishing it changed the way this workaround behaved. I haven't seen an example that someone's created for the latest versions of Storyline - but we'll keep you posted if we see it and link back to this discussion. 

OWEN HOLT
over 3 years ago06/22/17 at 9:02 pm (UTC)

As far as I can see, the JavaScript solution still works in SL3. See the attached SL3 .story file and the zip of the published content. The .story file has 2 song choices on slide 1 and 2 on slide 2 as well as a volume control dial (found on the slide master).  Unzip the file and double click the story_html5.html file.

Daniel Bolia
3 years ago08/28/17 at 7:13 pm (UTC)

Hi Owen,

Thank you for posting your example and source files. I used your codes to create an SL file with music that spanning multiple scenes. I also used some of Jason Hamner's codes (https://community.articulate.com/discussions/articulate-storyline/background-music-demo?page=3) to auto play a designated music file at the beginning of the scene and stopped at a designated scene. I was also able to go backward in the timeline and the music would auto-restart at the designated scene. 

Your volume control button was also very fancy and works wonderfully. However, my course was designed to show the default player volume control. Is there any way to control the background music using the built-in volume control?

Thank you,

Dan

Andrea Squires
3 years ago09/19/17 at 7:32 pm (UTC)

Hi Emily,

Thank you for the wonderful audio trick, it's works like a charm when I'm publishing to web. But I need to publish to an LMS and mine needs the file to be zipped.  I tried publishing as SCORM, adding the code, and then zipping and uploading.  LMS wouldn't accept the file. Any ideas what's happening?  Thank you.

Sign In to Reply