Background Audio Cool Trick
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!
256 Replies
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.
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.
Wow thanks Dave I'll give it a go and let you know how I go ;-)
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.
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.
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!
Hi Robert,
I am honestly not sure how to get it to start on a different slide. This was one of my first attempts at adding custom code to a published file. If anyone in the community here knows, I am sure they will share.
Glad this post is still helping!!
If you use JavaScript to modify the web page dynamically you can change the audio with different slides.
Link to my post in this thread.
Link to additional discussion thread.
Thanks for the JavaScript Owen! I was able to modify the script you provided and get my looping audio to begin on slide 3 of my course. Very gratifying.
Glad it worked out for you.
We tried the steps using SToryline 3, we didn't get the same results. Can anyone help?
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.
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.
Hi Matthew,
Do you have a fix for this?
Thanks:)
see my fix above.
This post was removed by the author
Wendy, I'm looking for the same feature. Did you ever find out how to do this?
Is this the right thing? It isnt working for me... document is attached.
this is not working in storyline 360.
Hi Nitesh,
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. Owen shared an example that worked for him in Storyline 3 - is that the one you were using?
It seems with all the interest in having a feature like this that the developers would be working to add it to 360.
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
Hey Daniel - I'm sure that Owen is probably still subscribed to the thread here, but you are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.
I have not yet been able to "hack" the built in volume control to control music volume.
So sorry.
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.