Variable Playback Speed

I did a survey of all the people who engaged with my online learning modules in the 2021. Their number 1 request was to be able to speed up the play back speed; at least 65% of the people I surveyed listed this as a request. I have formally requested it through the "feature request" page, but want to add the comment here too, in case it helps!

Math, it sounds very interesting. I am trying to imagine cases where people would want the timeline to speed up, though.  Videos and audio I understand.  I suppose you mean speeding up audio on the timeline?

I used Mark Ramsey's javascript to speed up videos in Storyline (Mark, if you read this: my boss was blown away and you made me look awesome; I did tell him though that it was all from "this guy on the internet who helped me").

:)

Hi Mary, I suppose speeding up the timeline is only usefull in cases where a lot of default animation is setup in Storyline using transitions and effects. As i do them most of the time directly with GSAP i dont have a direct usecase for it. As i know there are a lot of Storyline users that do use the timeline a lot i can imagine a use of speeding it up...when you use the timeline a lot to time appearing/disappearing of texts, audio and other elements. 

Having that said i immediately see a hurdle. Added audio and video should be accelerated/deccelerated too when changing the speed of the timeline.... ;-) 

Thanks for the link :) I've submitted a request

Count me in for this feature, too. I use Rise for building some classes and it works well.  However, now I'm using Storyline more lately. It's terribly awkward to go backwards!  P.S. I submitted my request for this feature using the link mentioned above. :)

On another post i mocked up a 'Starwars'-look-a-like intro. The text is set in perspective and with a GSAP timeline animated into the depth.

https://360.articulate.com/review/content/ba69712d-da72-41b0-9326-88523d89a8e9/review

The buttons speedup or slowdown the timeline. Basically this is what should be available in Storyline itself. I didnot have time to dive into the base of Storyline code to get that done. But recreating ( and improving ) any timeline animation you have in Storyline with GSAP as seen here... is easy enough to do. Here you find all about GSAP timelines https://greensock.com/docs/v3/GSAP/gsap.timeline
And if anyone needs help recreating his/her SL timeline animation with GSAP just shout.

Attached the Starwars GSAP timeline.

Kind regards,
Math

Math, this is really cool, thanks so much for sharing with us! Is it possible to adjust the speed of an audio file on the timeline as well?

Using Javascript...yes. The GSAP timeline as shown in the Starwars sample is not the Storyline timeline as is. Although i suspect Articulate uses GSAP to convert all the user done on the timeline to convert it to a GSAP timeline. The sample i show uses GSAP to do the animation..and as it is a true GSAP timeline it can be speed up, slowed down , paused, reversed and much much more. Adding video and/or audio with Javascript and GSAP also gives you control over the speed. If you have a Storyline sample setup... i gladly convert it to a GSAP version in Storyline to test and play with.

Math, thank you for your time spent laying this out for us.  I checked out your coding (I know very little of JS and nothing of GSAP) and saved it for future.  It looks like Green Sock has tutorials on GSAP.  Thanks for the new knowledge.

Thanks for your insights and for offering your time.  I'm new to coding; would the GSAP have to be applied separately to each object on each slide then?  My current objective is to slow and speed up audio files, not just animations.

Gsap is build into Storyline360, ( not in 3 ) so you can use gsap code anywhere. To speed up audio you need to select the proper audio and change the playbackRate.

Something like this:

If you code it like this...

var allAudios = document.getElementsByTagName("audio");

it will get all audio on a page.

However then you have to loop the collection of elements you found like this...

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

If you want to speed up a single audio file...its like this
 allAudios[1].playbackRate = 2.0;


Same over here!

I agree that this would be a great feature to have. It would be a nice way for a learner to control the speed at which they learn. 

Would absolutely LOVE to have this feature put into storyline.  I was hoping because the thread was so old, there would be an update explaining how to implement it or that it was coming. 

Hi folks,

I'd like my vote in for this as well. I think it's terrible that a feature like this isn't natively in the tools. You can increase the playback rate in most modern video and audio players.

Hi Mark, 

Your solution worked beautifully for my stand-alone videos (that I copied into your template, even when I tweaked it a bit). However, when I put them into another project, the plus and minus buttons change the playbackSpeedPC variable but not the actual playbackSpeed. I adjusted the numberOfVideos as recommended, and have double checked the script. I even imported a working version of the story into my project, but the result was the same. Any other suggestions?

Thanks!

Publish your file, open up the inspector tools in your browser ( aka the console  F12 or CTRL+Shift+I ) and then you should be able to pinpoint why its not working.

playbackSpeedPC is for the variable reference — the screen. playbackSpeed is the actually controlling variable that reaches down & changes the speed of the video. Aside from what Math suggested, you could iteratively start from the top, adding videos/slides as you go while increasing the numberOfVideos number. Other than that I could take a look...

Adding another vote for this feature. We have slides with audio files and objects animating in at different times using the Storyline timeline. Giving the learner at least the option to play 1.5/2x would be a great feature.

@Math Thanks for this code! I have implemented in my project and it seems to work well when I publish for web and run it on my local machine. However when I put it on the web server it does not work....I am sure that I am missing something fairly obvious and easy, but cannot figure out what it might be. Could you offer any guidance?

For sure i can help. Its the audio speedup ? Do check your console for errors. Most likely is that your code cannot find the proper audio-element. If you can't find and fix it, add a sample of your Storyline here and i will doublecheck.

@Math, thanks for the offer. This is really frustrating to me that I cannot get it to respond as you suggest. I am sure it is user error on this end but cannot find it. At my wits end!!