Are you looking to give your e-learning courses a professional touch by adding a custom mute/unmute button? Articulate Storyline 360 doesn’t provide a built-in toggle for volume control, but with a simple JavaScript solution, you can create a seamless and interactive audio experience for your learners.
Click Preview to see How to Master Audio in Storyline 360 with a Custom Mute/Unmute Button Using Simple JavaScript.
In this guide, we will show you step-by-step how to create a custom volume button that mutes and unmutes your audio while also updating its icon for a visually intuitive experience.
Why Add a Custom Volume Button?
Audio plays a crucial role in e-learning, but learners sometimes need control over the sound. A custom mute/unmute button:
✔ Improves accessibility for learners in quiet environments.
✔ Enhances user experience by giving learners audio control.
✔ Adds a polished, professional touch to your Storyline 360 course.
Step-by-Step Guide to Creating a Custom Mute/Unmute Button
Step 1: Prepare Your Slide Content
Open your Storyline 360 project and ensure your audio content is ready. This includes narration, background music, or any sound affects you want to control with the mute/unmute button.
Step 2: Insert a Button for Volume Control
✔ Go to the Insert tab.
✔ Select Button and place it on your slide.
✔ Choose a corner location so it doesn’t block important content.
Step 3: Add an Icon to Your Button
Use a speaker symbol to indicate that sound is on. This visual cue makes it clear to learners that audio is currently playing.
Step 4: Create a Selected State for the Button
✔ Open the States panel for your button.
✔ Add a Selected State and replace the speaker icon with a muted speaker symbol.
✔ This allows the button to visually toggle between sound on and sound off.
Step 5: Add a Trigger to Execute JavaScript
✔ Select your button, then add a trigger: Execute JavaScript when the button is clicked.
✔ Paste the following JavaScript code in the editor:
function toggleMute() {
const mediaElements = document.querySelectorAll(‘audio, video’);
mediaElements.forEach(function(element) {
element.muted = !element.muted;
});
}
toggleMute();
Step 6: Test Your Button
✔ Preview the slide in Storyline 360.
✔ Click the button to ensure the icon switches between sound on and muted states.
✔ Confirm that the audio toggles correctly.
Customizing the Button
✔ Different Icons – Use any graphics that match your course design, like a volume bar or animated speaker.
✔ Size & Position– Make it prominent enough to notice but subtle enough not to distract.
✔ Hover Effects – Adding a hover effect improves interactivity and user experience.
Common Issues & Fixes
✔ Audio Doesn’t Mute:
- Ensure all audio is placed directly on the slide, not in layers or embedded as video.
✔ JavaScript Doesn’t Run:
- Verify your browser allows JavaScript execution in Storyline 360 previews.
- Make sure the variable exists.
✔ Icon Doesn’t Update
- Double-check that the button has a Selected State and the trigger is set to toggle it.
Best Practices for Audio Controls in E-Learning
✔ Always include a visible and intuitive audio control for better learner experience.
✔ Avoid auto playing multiple audio tracks simultaneously.
✔ Test your course across different devices and browsers to ensure consistent behavior.
✔ Keep your icons consistent throughout the course for clarity.
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 mute/unmute button in Articulate Storyline 360 is easier than you think. With just a button, a couple of icons, a Storyline 360 variable and a few lines of JavaScript, you can give learners complete control over the audio in your courses. Not only does this enhance accessibility, but it also adds a professional, polished touch to your e-learning content.
Start implementing this simple solution today and elevate your Storyline 360 courses with interactive audio control!
Frequently Asked Questions (FAQs)
Q1. What is a custom mute/unmute button in Articulate Storyline 360?
A. It is a button that toggles the course audio on and off, usually changing its icon to indicate whether sound is active or muted.
Q2. Why should I use a custom mute/unmute button instead of Storyline 360 default player controls?
A. A custom button allows you to maintain a clean slide design, position the control anywhere and provide a visual toggle that aligns with your course’s style.
Q3. What types of audio can be controlled with a custom mute/unmute button?
A. Any slide-based audio in Storyline 360, including narration, background music, or sound effects, can be muted or unmuted using this method.
Q4. What types of audio formats are supported?
A. Standard audio formats used in Storyline 360, such as MP3 and WAV, are supported.
Q5. What is the difference between Storyline 360 player mute option and a custom button?
A. Storyline 360 player mute controls all course audio globally, while a custom button allows slide-level or selective audio control with a personalized visual toggle.
