How We Solved a Custom Mute/Unmute Challenge in Articulate Storyline

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

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