GSAP timeline to speedup / slowdown any animations on it

new idea

copy

window.AudioContext = null;
window.webkitAudioContext = null;

to

story.html + index_lms.html

or better at the end of the user.js

the two lines cannot be added to the internal storyline javascript - it's to late

I have read your email and your question was

BTW I have another question, but it is for another function, do you know how a user can change the size of the closing caption by running a Java, I found some solution, but this one only works for one time.

I used:

Big size

if (!window.alteredCaptions) { 
var sheet = document.createElement('style'); 
sheet.innerHTML = ".caption{font-size:180% !important;}"; 
document.body.appendChild(sheet); 
window.alteredCaptions = true; 
}

Small size

if (!window.alteredCaptions) { 
var sheet = document.createElement('style'); 
sheet.innerHTML = ".caption{font-size:140% !important;}"; 
document.body.appendChild(sheet); 
window.alteredCaptions = true; 
}

Any advice for this?

this could be interesting for others

here is an example, to switch the CC size in the course

https://360.articulate.com/review/content/64b7f0b8-1cdc-4918-80bf-12eaf86edd11/review

prepare script -> on timeline starts - on every page* which uses CC (because of resume course)

if( !window.alteredCaptions ){
  style = document.createElement('style');
  
  style.textContent = `
    .CC-small .caption {
      font-size: 140% !important;
    }

    .CC-big .caption {
      font-size: 180% !important;
    }
  `
  document.body.appendChild(style);
  window.alteredCaptions = true;
}

the button script (for 180%)

 // reset
document.body.classList.remove('CC-small', 'CC-big');

// set
document.body.classList.add('CC-big');

the button script (for 140%)

 // reset
document.body.classList.remove('CC-small', 'CC-big');

// set
document.body.classList.add('CC-small');

the button script for reset size

 // reset
document.body.classList.remove('CC-small', 'CC-big');

to set "CC on"

if you wan't to store the state of the CC size - use a variable

* or once in story.html/index_lms.html or at the end of user.js

Hi Math,

I have read several posts about GSAP, I did the test with the example of speeding up audio and video, however I would like to know if you have any update about the timeline speeding up as well.

Greetings!

When you plan your project with GSAP, and ensure all is build with GSAP instead of using default Storyline transitions and animations.... you can use GSAPs timeline functions and global timescale functionality to speed up or slow down the complete setup. The newest version of GSAP 3.11.1 has a new function called gsap.context() that makes it even easier to maintain and control behaviour of all your gsap animations.

As now all this still isnot possible with the default Storyline timeline and animations...i suspect they use GSAP internally for it, but i tried controlling it and that doesnot work. Mentioned this to Articulate though and hope they implement it in the near future.

Another great new feature in the latest gsap version is gsap.matchMedia()

This feature gives you the option to adapt animations based on screensize and resizing. Whether and how this works in Storyline360 ( Storyline being not responsize ) i have to test.

Thank you very much Math,
I have a conflict with the background audio help, since also within my functionalities I added to be able to speed up the voiceover audio (https://community.articulate.com/discussions/articulate-storyline/can-you-speed-up-the-player-in-articulate-360?page=3), however, when I do this, it also speeds up my background audio.
Can you help me to find the solution in the java so that it does not take the background audio speed.

https://community.articulate.com/discussions/articulate-storyline/continuous-playing-background-music-over-all-slides-in-storyline360

My code:

speed up audio

var allAudios = document.getElementsByTagName("audio");
for (var i = 0; i < allAudios.length; i++) {
   allAudios[i].playbackRate = 1.25;
}

slow down audio

var allAudios = document.getElementsByTagName("audio");
for (var i = 0; i < allAudios.length; i++) {
   allAudios[i].playbackRate = 0.5;
}

Audio background

//load the scripts dynamically into the head of the document

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.5;
}

play audio background

var audio = document.getElementById('bgSong');
audio.src="story_content/external_files/MusicaDiversidad.mp3";
audio.load();
audio.play();

I hope you can help me

Thanks

What you did wrong is looping all the audios in the Storyline and changing their playback speed.

A for loop basically acts on all elements it finds. To fix that you need to only act on your embedded audio. How to do that ? Well several solutions...for one you can check the name of the audio...if that is the one you want changed....act.

for (var i = 0; i < allAudios.length; i++) {
       allAudios[i].playbackRate = 0.25;
}

Like this...it changes th playbackRate of all your audios...

for (var i = 0; i < allAudios.length; i++) {
    if(mp3Name !="MusicaDiversidad.mp3"){
       allAudios[i].playbackRate = 0.25;
    }
}

And like this it changes all audios except your background music.
To get this working we still need to know the names of our mp3s. Especially because Storyline generates a custom name for embedded audio.

Like this when checking for allAudios[i].url:
.../story_content/external_files/MusicaDiversidad.mp3
.../story_content/5UxkXXG1RPh_44100_48_0.mp3

Also you notice the folder structure for embedded and external audio is different.

So splitting the url in an array and getting the last value of that array gives us the proper names.
Then this works.

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 = 0.25;
    }
}

Kind regards,

Math

Woooooow that's great news...
Thank you very much Math, you don't know how grateful I am.
It is that I was taking several post codes on the subject and so I did not know how to configure it correctly, what course I need to take to learn java.

One more question, is there any way to add in the code that respects the speed of playback from one slide to another, because every time I advance to the next slide the user would have to click on speed +/-, and we need it because this configuration is for people with disabilities and should be as few clicks as possible .

But how, because the speed is on the java code, how can I add a variable to respect the speed?

Math, I saw the storyline project very quickly and my brain exploded at a surprising result.
Let me interact with this, but again, verily thank you very much...

HI MATH;
I'm having problems with the content, but it's weird because when I view the story.html on my computer the button speed works, but when I upload it on an lms it doesn't work.
I leave you here my file and the link of it in the lms to know what I am doing wrong.

Link:

https://app.cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=20ac6d0f-e01c-4187-bfe7-033242c98617