Articulate Storyline 360 is one of the most popular eLearning authoring tools, but there’s one small limitation: it doesn’t natively allow you to add playback speed controls to specific slides. By default, the feature is global either all slides have it, or none do.
Click Preview to watch how to add a custom playback speed control to a single slide in Storyline 360 with JavaScript.
In this blog we will show you how to adding a JavaScript-based playback speed control to just one slide in your course, without affecting the rest of the slides.
Why Add a Custom Playback Speed Control?
✔ Keeps learners in control: Some learners want to replay content slowly, others prefer to move quickly through familiar material.
✔ Avoids global changes: You may only want Playback Speed Control for specific, content-heavy slides.
✔ Works with HTML5 output: Fully compatible with Storyline 360’s HTML5 publishing option.
✔ Perfect for:
- Compliance modules with lengthy narration
- Software walk-throughs with many repetitive steps
- Technical demos where learners might need to slow things down
Step-by-Step Guide: Adding a Custom Playback Speed Control to a Single Slide in Storyline 360 using JavaScript
Step 1: Enable the Playback Speed Control
✔ Open your project in Articulate Storyline 360.
✔ Go to Player Settings.
✔ Scroll down to Player Controls.
✔ Check the box for Playback Speed.
✔ Click OK.
Note: At this point, the Playback Speed Control will appear on all slides.
Step 2: Hide the Control from All Slides
✔ Go back to Player Settings.
✔ Uncheck Playback Speed.
✔ Click OK.
Note: This removes the Playback Speed Control from everywhere, so we can selectively bring it back where needed.
Step 3: Hide the Playback Speed Control via JavaScript (Default State)
We’ll set up the Playback Speed Control to be hidden by default.
✔ Go to the View tab.
✔ Open the Slide Master.
✔ Set up a trigger to execute JavaScript.
✔ In the JavaScript editor, paste:
var playbackSpeed = document.getElementById(‘playback-speed’);
playbackSpeed.classList.add(‘hidden’);
✔ Click OK and close the Slide Master.
Step 4: Show the Playback Speed Control on a Specific Slide
Now we’ll override the default and show the Playback Speed Control for the target slide.
✔ Open the specific slide where you want the Playback Speed Control to appear.
✔ Set up a trigger to execute JavaScript.
✔ Paste this code:
var playbackSpeed = document.getElementById(‘playback-speed’);
playbackSpeed.classList.remove(‘hidden’);
Step 5: Test Your Course
✔ Preview or publish your course.
✔ Navigate to a slide without the Playback Speed Control, it should be hidden.
✔ Go to your target slide, the playback speed control should be visible and functional.
Tips for Customizing eLearning Development
Browser Differences
✔ JavaScript execution can behave slightly differently across browsers.
✔ Test your content in Chrome, Edge, and Safari to ensure consistent functionality.
Custom Styling
✔ You can modify the CSS in your script to reposition, resize, or restyle controls.
✔ Keep accessibility and responsiveness in mind when making changes.
Version Compatibility
✔ This method is compatible with the current Storyline 360 HTML5 output.
✔ Flash output is not supported and is no longer recommended.
Looking for a Learning Management System (LMS) Solution?
We offer Learning Management System (LMS) solutions tailored to your organization’s unique training, compliance, and performance management goals.
Whether you’re a corporate organization, educational institution, or non-profit, we’re here to help you deliver engaging, scalable, and measurable learning experiences.
Summary
Adding a custom playback speed control to a single slide in Storyline 360 using JavaScript gives you the best of both worlds, precision control for specific content-heavy moments without cluttering the entire course with unnecessary options. Whether you’re building a compliance module with a long narration, a technical demonstration, or a software walk-through, this approach ensures learners can move at their own pace exactly when it matters.
Frequently Asked Questions (FAQs)
Q1. Can I add a playback speed control to only one slide in Storyline 360?
A. Yes. While Storyline 360’s built-in playback speed control is global by default, you can use JavaScript to enable it on specific slides only. This allows fine-tuned control without affecting your entire course.
Q2. How do I use JavaScript in Storyline 360 HTML5 courses?
A. Set up a trigger to execute JavaScript. This lets you customize player features, control media, or change playback speed dynamically.
Q3. Can I set different playback speed options for different slides in Storyline 360?
A. Yes. Each slide can have its own JavaScript trigger specifying which speed options appear for learners.
For more information, please visit our Custom eLearning Development Services page.
Q4. Does JavaScript work in Storyline 360 HTML5 output?
A. Yes. JavaScript can be used in HTML5-published Storyline projects for custom functions like showing/hiding controls, triggering animations, or manipulating playback.
Q5. What is Articulate Storyline 360?
A. Articulate Storyline 360 is a flexible authoring tool for building interactive eLearning content.
