Continuous playing Background Music over all Slides in Storyline360

As this subject keeps returning i decided to make a single post in which i add my solution to this, so when replying on someone's question to this i can just point to this post.

In fact its easy enough to do in Storyline as is with some Javascript.

Here you can see a sample.
https://360.articulate.com/review/content/7dc09046-4f80-439c-ba91-23af8fdd08f0/review

And for some other user i made a simple sample. Very easy for not-experienced Javascripters to get this working. You only need to do 2 things to get background audio working properly.

- Replace the audiofile in the resources.
- Change the variable 'audioFile' into the name of your audiofile.

And then all works.

Basically there is an extra slide not used in the flow, but adding resources that in the end will publish to the storyline_content.
hidden
A variable with the 'filename.mp3' is set so in the end you only need to change that variable and add any wanted audio to the resources.

At start a Javascript is executed adding the needed code to the HTML and then another Javascript is needed on a trigger to start the background audio playing. As is you cannot use the default Storyline volume button as this only works with inline Storyline audio. I added a button to pause/play audio. Thats the easiest solution for that. Offcourse you can add the pause/play and the volume control functionality to the default Storyline button, but thats another journey.

Good luck,
Math

 

4 Replies
Jade Tan

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

Jade Tan

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

Math Notermans

Sharing your sample probably easiest. What i can see now is that you probably mixup Storyline variables and audio file name. Do use something like.. 'myAudioBgVar' for your Storyline variable. Then it makes way more sense. And then you can set your variable to the proper audiofile.

And you donot need to have the audio file in the Storyline timeline. It needs to be added as resource. Like in the sample...

audiobg