Variable Playback Speed

Jun 17, 2016

We build our e-learning courses using Articulate Storyline.  Recently, a number of our students have asked us if we can provide functionality of increasing the speed of the delivery, the provision that they have in Lynda courses and youtube videos.  

So I was wondering there is a provision for the same in Articulate Storyline.  



Pinned Reply
Luciana Piazza

Hello Everyone!

I'm happy to share that we have released Storyline 360 version 72 (Build 3.72.29654.0).

Included in this release is a new feature where you can let learners explore at their own pace by choosing a course playback speed between 0.25x and 2x.

Now all you need to do is update Storyline 360 in your Articulate 360 desktop app on your computer. You'll find our step-by-step instructions here.

Please let us know if you have any questions by reaching out to our Support Engineers directly.

Have a great day!

160 Replies
Paula Saner

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!

Mary Michelini

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").

Math Notermans

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.... ;-) 

Math Notermans

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.

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
And if anyone needs help recreating his/her SL timeline animation with GSAP just shout.

Attached the Starwars GSAP timeline.

Kind regards,

Math Notermans

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 Notermans

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;

Tami Taylor

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?


Mark Ramsey

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...

Marty Riesberg

@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?