Background Audio Cool Trick
May 23, 2016
Pinned Reply
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:
- Background audio is now supported in the published video output.
As a first step, I recommend updating Storyline 360 to the latest version. Here's how:
If you have any questions, please let us know in this thread or privately in a support case.
Have a great day!
279 Replies
This is AWESOME! Thanks so much for sharing Emily, what a fantastic workaround!!!
Hi Tom,
Glad to see this is helping so many people :)
Absolutely! The other ways I was thinking to do this weren't exactly elegant. This worked perfectly and took no time to do. Plus, you've made it so anyone can do it – even if you know diddly-squat about HTML coding (like me). Thanks again!
Tom,
I don't know much about coding either, trying to learn, so when I see a simple way to do things, absolutely need to share!
Hi William, I'm not sure your response was for me, but the volume is not the issue. The music doesn't play altogether once transferred to the web server. Any other ideas out there? Thanks very much.
That works great! thanks
This has been a popular one Anna :) Glad it was able to assist you as well and welcome to E-Learning Heroes!
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?
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.
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
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 :)
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!
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.
Does anyone know if it's possible to control the audio levels? As in fade out the music when a video starts and fade it back in after.
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!
Matthew,
Do you add that code before </html> and after <body>? I can't get it to work :-(
A few things you always need to check, double-check, then check again. This is just a start, hope it helps.
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!
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%
Here is an attached file where you can see everything in action. The only difference is that with this file, I stream the music from a website rather than load it with SL so the location variable isn't used nor the associated script.
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.
i managed to loop music but i want to mute it in certain slides as i am running video. anyone know how to do it?
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 ;-)