Continuous playing Background Music over all Slides in Storyline360

Math, thank you for posting this, I like the simplicity of this method, much appreciated!

Hi Math, thanks very much for this solution. I've tried the method but it didn't work for me. Not sure if my variables in the scripts are correct. I've highlighted the variable in bold below. Please see:

Slide 1: When timeline starts (no changes);
var player = GetPlayer();

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 = false;
head.appendChild(line);
}

//We only want to add these once!
if(document.getElementById('bgSong')==null){
add_line();
var audio = document.getElementById('bgSong');
audio.volume = 0.3;
player.SetVar("javascriptsLoaded",true)
}

Slide 1: When javascriptsLoaded changes

var player = GetPlayer();
this.Location= player.GetVar("location");
this.audioFile = player.GetVar("audiobg.mp3");
var audio = document.getElementById('bgSong');
audio.src=Location + audiobg.mp3;
audio.load();

Slide 1: When user clicks button 1

var player = GetPlayer();
this.Location= player.GetVar("location");
this.audioFile = player.GetVar("audiobg.mp3");
var audio = document.getElementById('bgSong');
audio.src=Location + audiobg.mp3;
audio.load();
audio.play();

Slide 2: Execute javascripts when user clicks button 1

var player = GetPlayer();

this.Location= player.GetVar("location");
this.audioFile = player.GetVar("audiobg.mp3");
var audio = document.getElementById('bgSong');
audio.src=Location + audiobg.mp3;

audio.pause();
audio.currentTime = 0;

Hidden slide:

I've pasted the audio source file here. The name is audiobg.

But for some reasons the published sample has no sound. Appreciate your help.

Thanks!

Warm regards,

J

Hi Math,

I attempted the method which you have shared, without changing any code in the javascripts:

1. Replace the audiofile in the resources slide

2. Change the variable 'audioFile' default value to 'audio-bg.mp3' which is my audio file name. But it still doesn't work.

Appreciate your help.

Thanks!

Warm regards,
Jade

Hi, we are migrating the e-learnings to TalentLMS and did the same steps as you mentioned after converting to SCORM. However, i realise the music background played on laptop but not on iphone/ ipad. Is this the expected behavior?

iPhone and iPad probably have other restrictions that prevent the auto playing of background music.... or the folder structure is different. Checking your console on the iPhone/iPad will give you clues on whats wrong.

>Checking your console on the iPhone/iPad will give you clues on whats wrong

unfortunately debugging on ios safari is not easy - there is no visible console in the browser(s)

instead you can

• remote debugging with a mac
• remote debugging with a windows pc
• include the library vConsole.js

all methods are not for beginners

Hi Jonatan,

Im not sure what you mean ? Howler or Buzz have functionality like this. Default Storyline lacks that.

Kind regards,
Math

Added the Storyline with the WebObjects folder including the libraries in this zip.
Good luck,
Math