Background Audio Cool Trick

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.

This is great and I love your example.  However, I can not get mine to work.  Does the file have to be an mp3 file?

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%

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.

I've used this trick before, and it was very helpful. But recently it no longer works in Chrome. Still works in IE and Fire fox though.

It sounds like it's a result of a new decision by chrome to mute autoplay adds, and my embedded audio is getting caught up in it.

Has anyone else encountered this, and have a new work around?

Hi everyone!

I have some great news to share. We just released another update for Storyline 360. In Update 74, we've included important fixes and new features.

One of the new features we've included is: 

• Create immersive experiences with continuous background audio that sets the tone and keeps learners engaged.

Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

Please let me know if you have questions!

This works great, Emily! Thanks!

This is awesome!  Do you know if you can adjust the volume too within the story.html folder? 

Hi Tara,

Glad this worked for you!

Unfortunately i am not aware of a way to adjust the volume. I did try using the Player volume button, and that did not work.

I am sure if there is a way someone will jump in here with a suggestion :)

Thanks for the tip guys!!