GSAP timeline to speedup / slowdown any animations on it

In easy to follow steps...

Create a custom variable. In this case 'audioSpeed', a numeric variable

Its default value will be 1. Then we go to the Javascript ( PS. it is Javascript, Java is something completely different ;-)

In this case we cannot add all of the script simply to the Maximo and Minimo buttons as you want the audio to be speed up or down on next pages when a user set it earlier. So we need 2 changes...one on the buttons that saves the chosen speed to the variable 'audioSpeed' and one on the start of every slide that sets the speed of the audio. Let us first change the buttons Maximo and Minimo.

This is the code needed on Minimo.
// player is your StorylinePlayer and GetPlayer() is a command to connect to it.
var player = GetPlayer();

// the audiospeed we want
var audioSpeed = 0.25;

// Now we can set the Storyline variable
player.SetVar("audioSpeed",audioSpeed);

And offcourse in your loop like this.
allAudios[i].playbackRate = audioSpeed;

On Maximo its the same except for the different speed.

Change this, and test it :-)

If you have that working as planned, the next step is getting it working on start of every next slide. You could add it to a Masterslide and have it happen on every slide that uses that Masterslide, but for now im showing it just on start of the existing slides.



We start with adding a Javascript trigger that gets executed When the timeline starts.

The code we need now is this.
var allAudios = document.getElementsByTagName("audio");
var audioNamesArray = [];
var mp3Name;

// player is your StorylinePlayer and GetPlayer() is a command to connect to it.
var player = GetPlayer();

// Now we can get the Storyline variable
var audioSpeed = player.GetVar("audioSpeed");


for (var i = 0; i < allAudios.length; i++) {
    var mp3URL = allAudios[i].src;
    var tmpArr = mp3URL.split("/");
    mp3Name = tmpArr[tmpArr.length-1];
    audioNamesArray.push(mp3Name);
    console.log(mp3Name+" pushed into ["+audioNamesArray+"]");
    if(mp3Name !="MusicaDiversidad.mp3"){
       allAudios[i].playbackRate = audioSpeed;
    }

}

Notice GetVar to get a Storyline variable into Javascript.

Thats it.