The Requirement
A client wanted a simple feature in their Articulate Storyline course—a custom button that could mute and unmute all audio and video throughout the course. At first glance, it seemed like a straightforward requirement. However, Storyline doesn’t provide a built-in trigger for controlling the player volume in the way we needed.
Key Takeaways
- Custom JavaScript can extend Storyline functionality.
- Storyline object states don’t persist automatically across slides.
- Variables can be used to maintain UI consistency.
- Testing navigation scenarios is critical.
A working feature isn’t complete until the learner experience remains consistent across every slide.
Implementation Blueprint
Step-1 Identify the Audio Control Method
After researching Storyline’s player architecture, we found a JavaScript function capable of toggling the course volume:
var appState = window.DS ? DS.appState : require("helpers/appState");
appState.onToggleVolume();
This provided the foundation for creating a custom mute/unmute button.
Step-2 Connect JavaScript with Storyline Triggers
The script was executed through a Storyline trigger whenever the learner clicked the audio control button. This allowed us to control course-wide audio without relying on default player controls.
Step-3 Address State Reset Issues
During testing, we discovered that the button’s visual state reset whenever learners navigated to a new slide. Although the audio remained muted, the button no longer reflected the correct status.
Step-4 Create a Custom State Variable
To overcome this limitation, we created a Storyline variable that stored the learner’s last audio preference:
– Muted
– Unmuted
The variable became the single source of truth for the button state.
Step-5 Synchronize the Interface
On every slide load:
– Storyline checked the variable value.
– The appropriate button state was applied.
– The learner experienced consistent audio controls throughout the course.
Final Thoughts
What started as a simple mute/unmute requirement turned into a deeper Storyline customization challenge. By combining JavaScript with custom variables, we created a reliable audio control system that maintained both functionality and visual consistency throughout the course.