Delay the start of background audio

Hi all guys,
here I am again to ask for your help ..

I know that officially you cannot support us regarding javascript, but on this forum I am sure to find someone of good will who will be able to help me.

Following the questions on this forum I am trying to get the audio to work in the background.

So I add this script to the first slide:

//SCRIPT PER FAR PARTIRE LA MUSICA (Lasciare "when timeline starts")
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.3;
}

And this script linked to a key:

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

With great satisfaction for me it works and the audio is heard!

The problem is that:
1) I would like to make the audio hear looped, (instead this stops when the music ends)

2) Is there a way to delay the start of the music by 3 seconds?

Many thanks to all those who will be able to help me.

8 Replies
Math Notermans

Basically your script already loops. There is some inherint issue with looping in WebAudio in combination with delay. 

So setting loop = false you can check the end of an audio and then timeout to any duration and replay.

Code like this:

//SCRIPT PER FAR PARTIRE LA MUSICA (Lasciare "when timeline starts")
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;
line.addEventListener('ended', (event) => {
console.log('Audio stopped, so wait before restarting');
setTimeout(timeOutAudio, 3000);
});
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.3;

}

function timeOutAudio(){

audio.play();
}


And for the button or key:

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

audio.load();
audio.play();

Adding my sample for you to dissect. Added the audio as resource.

Math Notermans

Ah yeah, well then i misinterpreted your original question.

Yes, the audio starts as soon as you click...but when reaching the end of the audio... a pause of 3 seconds is set before it loops.

If you want to add a 3 seconds pause at start... well you can use the same timeOut as on the end of the audio... 

On the click or key change the code to this:

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

 audio.load();

setTimeout(timeOutAudio, 3000);

function timeOutAudio(){
audio.play();
}

Mmmm... i added a input to change the delay both at start and end...and apparently it does not work.. Gonna figure it out and fix it.

Math Notermans

So now it works.

Basically the JS sets a variable by running a 'setInterval'. If a condition is true ( equals  audioDelay ) both the JS and Storyline clear the Interval and play the audio.

Only didnot yet implement it on the loop of the audio. With the sample and the code above you should be able to get that working too.

Kind regards,
Math

m m

Hello dear Math! You are a saint who is helping me!

it's true, it works great for you!
I tried in every way, even inserting your file in my project .. then I realized that the defects that do not make the audio work as they should are two:
1. The "delayed" audio only works by rerunning the same slide, if instead the key that starts the music goes forward one slide, the audio no longer works.
2. The script seems to work only from a computer, from a smartphone and tablet, it doesn't work even staying on the same slide..

it is very strange because using the old script the audio starts immediately, but both from mobile devices and using the same key to go to the next slide.

I attach the test file here, again thank you so much for the help!

m m

Hello everybody,
to be honest I tried and tried to start the music 3 seconds later, having failed in the end I opted to modify the music with 3 seconds of silence at the beginning.
Of course every time you restart in the loop it waits 3 seconds before you hear the audio, but at least it works!

Thanks a lot to everyone who tried to help me, especially Math who even tried to create the file!

Math Notermans

Rereading your issues...offcourse any audio is tied to a given slide. If you want background audio over multiple slides..well thats possible too, but a complete different ballgame. Do check my samples and you find solutions for audio that play over all slides...and thus you can reset, fade, pause and play it.

Mobiles have different audio triggering. Also i do think the samples using javascript audio libraries as Howl and the alike will work on mobiles and tablets. Storyline's mobile player doesnot support Javascript so with that one your completely out of luck.

The links below might be helpfull...
https://360.articulate.com/review/content/afad28c3-1f73-43bc-b7b2-7ad1ab1e48e6/review
https://community.articulate.com/discussions/articulate-storyline/background-audio-cool-trick?page=9