GSAP timeline to speedup / slowdown any animations on it

Thank you Math, hope you can found a solution, also I asked Mark if he knew something new.

I was so secure about the code, and now I need to do 13 materials accessible with these functions at the end of the week, I am going to cry if we don't found a solution. :P

new results: if web audio is available, no <audio> elements are added to the DOM


to check: i have disabled "web audio" in firefox

result:

now enable "web audio"

so it's clear -> web audio is used (without DOM)

https://caniuse.com/?search=web%20audio

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

one idea - you would have to prevent storyline from switching to web audio

for this you have to patch "html5/lib/scripts/bootstrapper.min.js"

replace
    return window.AudioContext||window.webkitAudioContext||null
with
   return /*window.AudioContext||window.webkitAudioContext||*/null

=> the player gets always the info "no web audio" available, use "normal audio"

important: save your patch js library - which is exacly for one storyline version - and copy the file after every publish

result on a https:// webserver

if you want the patched file for all your courses you could overwrite the library file in the programm folder  - so a manual overwrite after every publish should no longer be necessary
(just not tested !)

but how can you find in the memory the timeline "web audio" object?

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

you have a big problem with loading your custom libraries - they are only loaded if the learner starts your course the first time

with resume enabled your first page with your initialisation will never started

I know... the things i upload mostly exist of 1 page setups...so no resume anywhere.
For a real course i have a setup where i have these on MasterSlides with variables checking if its loaded. If so... it skips it. I seldom use resume in the samples showing here. Users that download and reuse my tips and tricks indeed need to be aware of that indeed.

do you have the two line patch on the right position?

 the lines had to be added AFTER the publish

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

first problem - the button script in the slidemaster

wrong:

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

correct:

var allAudios = document.getElementsByTagName("audio");
for (var i = 0; i < allAudios.length; i++) {
   var mp3URL = allAudios[i].src;
   var tmpArr = mp3URL.split("/");
   mp3Name = tmpArr[tmpArr.length-1];
   if(mp3Name != "FondoSusten.mp3"){
      allAudios[i].playbackRate = 0.70;
   }
}
...

second problem: audio is working correct after slider change - your script is correct

BUT: you have to update the navigation button also (on timeline start on every slide)