Audio-Button functions and states within selfbuild WBT menue and options

One of the main challenges was ensuring that both the button and the menu label were clickable while triggering the same action, toggling the audio (mute/unmute) and updating the button’s visual state accordingly. It was important to keep both elements synchronized so they consistently reflected the current audio button state.

Another key requirement was preserving the user’s selection when navigating between slides. If the audio was turned on or off, that preference needed to persist, with the ear icon updating appropriately (crossed out when muted and normal when unmuted) each time a new slide was loaded.

Since the global volume was managed through JavaScript, I integrated the Storyline object reference into the same script to access and control the audio button states. This allowed the interface to update dynamically based on whether the global volume was on or off. Additionally, I created a custom variable, volumeOn, set to true by default and toggled as needed to track and control the audio state across the entire course.

The only obstacle I encountered was related to a grouped object consisting of an ellipse shadow and the actual audio (ear) icon. Because the elements were grouped, it was difficult to target and control the icon independently using object references, due to how Storyline handles grouped objects on load. Rather than spending excessive time trying to work around this limitation, I chose a more efficient approach: I recreated the icon as a single element and separated the shadow into its own object, which is only visible on hover. The visual difference compared to the original design is minimal and barely noticeable.

There are a total of three scripts on the Slide Master (two on the base layer and one on the menu layer), all labeled “Added by Nedim” for easy identification. Please test the attached project and let me know how it performs.