Forum Discussion
Variable Playback Speed
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.
Thanks,
Payal
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
It's absurd that Storyline doesn't have this.
+1 on this
We get lots of comments from students that have good reasons for needing this feature. It's so common across online multimedia that it's fully expected by people now - please get this done!
I've now gotten my first request for this. Please add this feature.
They're going to want you to request the feature this way --> https://articulate.com/support/contact/feature-request
Thank you for your advice. I submitted a request for the feature. I had to
hold back on using Articulate storyline solely because of this one issue. I
can't understand why Articulate is so behind on this issue, especially in
light of the data supporting the benefits of using variable speed.
As Mark states at some point in this discussion, there are 2 parts in Storyline that both would benefit from giving the user the possibility to setting the speed. Videos and the timeline.
For videos there are several options with other players or Javascript to get it done.
For the timeline there is at this moment no option. However as Articulate uses GSAP internally to do almost everything animationwise, i strongly believe they use it too for the timeline.
And especially i suspect they do use the timeline feature of GSAP to create and control the timeline in Storyline.
https://greensock.com/docs/v3/GSAP/Timeline
Especially when you check slides.min.js you find evidence of that...
timeline: this.props.model.timeline()On several spots...
s.add(gsap.timeline().to(n, {x: e * (2 === t ? -1 : 1),ease: "power2.out",duration: i
And when you check bootstrapper.min.js you find more evidence...wrapGsap: function(t) {t.pause(),t.totalTime = function() {return i.toMilliseconds(t.duration())},t.stepAnimation = function(e, n) {var r = i.toSeconds(e);t.seek(r, !0),t.render(r, !!n, !0)}},
So im quite sure the Storyline timeline is in fact a GSAP timeline. And i do think with GSAP and javascript i can make the speed of the timeline controllable. So speed it up, slow it down at will. However this will be quite some research endeavour and will involve javascript. If enough people are interested in a workaround like this...im gladly spent time and get it working. Will take some time though...Math, you are a gem! What an altruistic spirit. Bravo.
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").
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.
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!
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,
MathMath, 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.
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;@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.
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.
