Forum Discussion
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.
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
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.
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.
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.
>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...
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
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 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,
JadeHi, 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?
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.
Added the Storyline with the WebObjects folder including the libraries in this zip.
Good luck,
Math
