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
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.
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.Hey so we just need one mp3 to play as background music and loop throughout the course and play automatically when the course starts. Can you help us out? I've tried using the examples before but have not found a way that it can play automatically without user interaction. This is the song we need to play automatically and loop throughout.
User interaction is a browser requirement. However, the user only has to interact once and then you can use that interaction to start your media.
My work blocks loading files to the community, however, I included the .story file (SL 360) in the course resources tab. I also included your audio file there as that is where I am playing the file from!
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!
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.
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!!
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.
