Forum Discussion
Audio-Button functions and states within selfbuild WBT menue and options
Hi everyone,
currently I am working on a selfbuild WBT menue with own options on buttons (like refresh, fullscreen, turn on/off subtitles, etc.). This also includes a button for un/muting audio. (Screenshot "Menue 1")
Until now I tried a lot; made my way through own ideas, tutorials in various forum posts or videos, asked colleagues, tried prompts in Copilot and so on.
The thing is, I always get stuck evertime at the same point. Therefore, I am reaching out to you in hope that you can help me out.
My setup is the following - first slide in master slide view:
I have a button that consists of these elements grouped together: a circular “Ellipse” element, and above it a vector graphic of an ear. This vector graphic has the normal state (regular ear Icon) and the state selected (ear Icon crossed out). (Screenshot Icon states)
The Ellipse has also a second state for hovering with a slight shadow around the circle.
Then, to make things even a little bit more complicated, when the user can either click this button directly from the side menue. But if they navigate to the "Menue"-Button, the side menue will expand, laid out on another layer (Screenshot "Menue 2 Expanded").
Next to each button is a section reading the function of the button and thanks to a hotspot over each section, it is also clickable. So the button must be functioning and changing it's states in both ways: regular menue and expanded menue - and from the expanded menue as well.
Goal; what should be the effects by clicking the Audio button?
- As soon as the user clicks on the button group, the audio on the slide should be muted and the state of the vector graphic should change: an ear crossed out.
- When the user clicks this button again, the audio should be unmuted, and the vector graphic should return to its original state (the normal ear). So, the audio should not be stopped and resumed: The audio should be "playing" without sound in the background with continuous timeline.
- A slide can also contain multiple consecutive audio files that play one after the other. The audio button un/mutes all of them when the user clicks the button.
- And when the user moves to the next slide, the WBT should remember that the selected function (audio is turned off/on) and show the ear icon accordingly (as crossed out/normal).
- Point 3 and 4 shall also apply for the audios of videos: So the video-part is still going on while the audio can be muted/unmuted. --> To make it trickier: This should also work for the case when there are audios and videos on one slide.
Has anyone an idea how to solve this riddle and incorporate all the required speficiations?
I would be beyond grateful.
I uploaded a scrubbed, condensed version of my SL project file. So that you can have a look on the setup and previous as well as actual triggers, Javascripts etc.
Thanks in advance for your support
Best regards
1 Reply
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.
