Forum Discussion
Background Audio Cool Trick
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!
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!
281 Replies
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.
- Is the file name and format in the code the same as the actual audio file?
- 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.
- If viewing in a browser did you refresh your screen before testing?
- Are you in "preview" mode or are you viewing your work in production? Some elements will not work in preview.
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%This is amazing. Thank you. You just have to remember to place your audio file in the "output" folder AFTER you have published to the Web or LMS. Web version: Update story.html. SCORM for LMS: Update the index.lms.html file.
