Can you speed up the player in Articulate 360?

Jun 15, 2017

I don't think this has been possible before, but can a user speed up the audio on the player in 360?

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!

83 Replies
Mary Michelini

Mark, I think I can thank you on behalf of our forum community.  I (we) have been searching for awhile for some kind of solution to this unfortunate shortcoming in Storyline.

I will try your code and see how it goes.  I am new to Java script but plan to learn it now!  It keeps coming up.  I will let you know the results.

Mary Michelini

Leslie,

Does Mark's file work for you?  When I press the plus or minus buttons, the audio does not respond.

I note that when I went to publish his file, it was set to publish to LMS with SCORM.1.2 output.  Not sure if that makes any difference.  I am publishing to Review 360.

Laura Seul

Hi Mark,

First, thank you so much for posting your workaround. There is probably an obvious answer to this but, I am not very familiar with javascript. If I have multiple videos, say 8 slides with different videos, where in the code would I change it to 8? What exactly do I need to put in there?

Thanks again,

Laura

Mark Ramsey

You count up all the videos, set "numberOfVideos" to that number, then whatever slide you want to control, you put that control layer in. Then, when the timeline starts, have a trigger that shows the layer.

The variable "numberOfLayers" you would set to 8 only once. Then in your case you would copy that control layer - the one with the buttons - into each slide with a video. Then on the main timeline of these slides you would put a trigger that will show the control layer.

Mark Ramsey

I'll check it. It worked for me before I posted. I know that it won't work if you try to preview it in Storyline, because previews don't interpret JavaScript code. if you publish to SCORM, then open up the course by clicking on the story.html file, or publish to Review 360, it should work.

Mary Michelini

Hi Mark!

By dumb luck, I realized that your JavaScript works when the SL file is published to the web or if I play it from the story.html file that is created when I publish to the web; it did not work for me in Review 360 (and of course not in Preview mode).  Do you know why it does not work in Review 360?  I suppose that I would need to solve that problem before it would work in our LMS?  

Mark Ramsey

I’m not certain why it doesn’t work in Review 360 for you. It does for us. [I just checked it again because of self-induced paranoia.]  I never publish to web — I publish to LMS or Review 360. But publishing to web is the same as to LMS except for the xml files & manifest that gets generated. If you have a SCORMCloud account, I'd upload the package there & run it, and read the logs to see if there were any errors thrown. 

I'd also just recheck to count up ALL your videos that are contained within the course file (even if they are incidental)  and set the "numberOfVideos" variable to that value. For example, we have a course template for simply putting a content video into a course, but we also have a brand video and a help video about captions that runs before we even get to the content. Adding the content video gives us 3 videos, so I set "numberOfVideos" to 3.

I can look at your code if you want.

Mary Michelini

Hello Mark,

When readying my file to send to you, I noticed that when I DUPLICATE the slide you sent (with your JavaScript controller inside), and build from there, your controller works in Review 360 (and in SCORM Cloud); when I COPY AND PASTE your slide into one of my existing scenes and build from there, it fails to work. If you happen to have an idea why, that would be most interesting.

Meanwhile, I'm fascinated by JavaScript and am studying it so that I can figure out how you did this!  Thank you again for your contributions to our community of learners!

Best,

Mary

Math Notermans

I dont think you have to be afraid of Articulate dumping GSAP. It is so deeply built into Storyline's code...do open slides.min.js and unminify it... you find dozens of traces of GSAP usage.  All Storyline's default animation features including eases, motion paths and the alike...are build on GSAP. If they dump it, they have to rebuild Storyline from scratch as its now ( 360 at least )

Mark Ramsey

I agree that Articulate probably won't dump the use of SAP for awhile. In reviewing the GSAP tutorials, it makes me wish that they would build some extra editors in an enhanced version that could open up these more advanced animation tools for usage. Unfortunately, my current position probably wouldn't want me to investigate this, because in the main we generally "churn and burn". But I think if I could show something like a Ken Burns effect, which it looks like GSAP is already set up to do, I could interest a few people!

Mark Ramsey

In response to the idea of using the GSAP library to control audio or video:

I'll written to Articulate to ask them what their plans are for Greensock GSAP. [I probably will not get a response, but I had to try.] I am leery of working with a clearly licensed, third-party library that could change at any moment from either Greensock or Articulate (who knows, they might find a vulnerability & need to close it down.) However, I have delved into GSAP a little in the past week, and came up with a (similar to) "Ken Burns" slow-zoom animation effect. I see a lot of power in using this approach. If I lose this due to a change in animation libraries in the future, that won't change my layout that much. The GSAP model creates new timelines that run independent of Storyline, so my initial layout conditions won't change much.

My best advice right now is "let the user beware" & try to figure in your course's shelf life. If you think your course will last for 3 years, I think it's a good bet you can work with GSAP. Luckily HTML5 will be with us for a while & JavaScript is probably not going anywhere either. & Storyline uses Bootstrap & that's a standard. I don't think we have to worry about any large-scale Flash-conversion of courses for the next bit.

Crystal Cuci

This is a little crazy that this is a feature that MANY people have requested for more than 4 years. Is there a logical reason why this feature has not been added?

Clearly it can be something that is available in the player which can be turned off and on as needed. It's evident that many, many users will enable it. We get this request from our learners all the time. 

Crystal Cuci

Thank you for the response, Math! I read through the comments and saw that it is possible with Javascript, which I know we could implement. However, as you mentioned, I have concern with the timeline, hence all animations, captions, etc. not syncing properly at that point. We could have a button that pop ups when the user clicks to speed it up the player that explains that, I suppose. However, I just want to see it all function properly like most modern players. :)

Math Notermans

Agree with you... i now have a functioning audio speedup/slowdown function and it works nice... but as said... the timeline itself doesnot know of the speedup and gets out of sync. Trying to fix that now i did find in the frame.desktop.min.js files in the Articulate folder some code that does the progress on the bar...

key: "onTick",
value: function (e) {
var t = 100 * e;
(this.progressBarFillEl.style.width = t + "%"),
this.progressBarEl.setAttribute("aria-valuetext", Math.round(t) + "%"),
(this.progressBarEl.value = this.currTimeline.timeline ? this.currTimeline.timeline.currentTime : 0),
y.trigger(g.currTimeline.TICK, e);
},

the width and the aria-valuetext are the values that show the progress. Im now gonna try to add a variable into that code...that i can use to speedup/slowdown the timeline.

Added a console.log inthere... and indeed the t variable inthere is the elapsed percentage of the timeline. Going from 0-100...
onTick t= 99.96249238126495

So if in some way i can influence that variable i can speedup/slowdown the timeline.
Actually the e passed to the function is a value going up from 0 to 1. So i indeed need to find a way to pass the playbackRate from the player to this part of the code.

Mark Ramsey

New version of Video Speed control attached. This controls:

  • The speed of playback of the video, from 50%-200%
  • The ability to jump back or jump forward 10 second
  • A timestamp display, with the ability to copy this to the clipboard

To use: 

  • Set the numberOfVideos variable to the number of videos in the entire project, even the boilerplate & incidental videos.
  • This controls the video timeline, not the Storyline seek bark timeline. You may want to turn off the seek bar on the slide & use the video seek bar instead.

HTH,

Mark Ramsey

Luciana Piazza

Hello Everyone!

I'm happy to share that we have released Storyline 360 version 65 (Build 3.65.28121.0) today! 

Included in this release is an enhancement where all learners are enabled to interact with videos via accessible controls that match the modern player style, exceed color contrast guidelines, and communicate perfectly with screen readers. Learners can even change the playback speed, switch to full-screen mode, and use picture-in-picture mode to move videos to a floating window.

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!