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

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...

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

Do like the vConsole.js tip Jurgen. Gonna implement it in my projects that need to be tested on iOs...

Spent a good bit of time trying to figure this out and was finally able to get this to work with your solution. Thanks so much for posting about this, Math! Hopefully there will one day be an option to include background audio in select slides built into Storyline like there is now with across all slides. 

In fact there is already. Making my workaround more or less obsolete, although reading comments of other users on the forum it is not yet perfect.
https://community.articulate.com/discussions/articulate-storyline/new-in-storyline-360-background-audio

Correction: reading your comment properly i do notice 'selected slides' and thats probably not in the background audio solution Articulate made.

That's correct, Math. Seems to only be across an entire project at the moment. Could you assist with the code to get the background music to loop when it is programmed to pull from the resources section? 

Hi Holly,

Thanks for letting us know you would like an option to include background audio in select Storyline slides. We have the item below logged as a feature request and will satisfy your requirements for selecting the slides where the background audio will play. 

• Provide a trigger to disable/mute the background audio soundtrack

I'll go ahead and include your voice. Here's a peek into our process for managing feature requests. Please let me know if you have any questions.

If i had time ;-) Alas no time atm.

Thanks, Eric! Looking forward to seeing this as an option in the future :) 

No worries. Was hoping it might be something you already knew :) I will do some research and testing and hopefully figure it out! 

Update: Just figured it out quickly by looking at the existing code and simply changed "line.loop" from false to true.

Hi everyone!

Good news! I'm happy to share that we just released Storyline 360 (Build 3.81.31200.0), which includes a feature to control the background audio for each slide using triggers to play, pause, or stop the playlist.

This was highly requested, so we hope it serves you in your course creation! If you run into any snags, don't hesitate to contact our team in a support case.

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