Forum Discussion
Muting Audio in Timeline
I'm creating a slide that includes a Text 2 Speech introduction, theme music, then Text 2 Speech instructions.
I would like to add a toggle to the page that will allow the user to mute the theme music only. Using the Play/Pause/Stop options available with built in triggers doesn't really cut it. If they press the button to mute, then change their mind to turn the music back on, I need it to resume based on the timeline. Restarting the music or resuming from the point where the music was muted results in the music playing too long and overlapping the T2S instructions. I think this means that I need to toggle the volume instead and believe this would have to be done using javascript. So far, I can't get it to respond to this.
Using the new API, this is what I was trying. But it had no effect.
const introrazz = object('60fAT9NKKGg');
introrazz.volume = 0;
There are multiple ways to detect an audio file name. For now, I’ll focus on one way.
Execute the following JavaScript global function when the timeline starts on this slide:window.muteAudio = function(filename) { var audioElements = document.querySelectorAll('audio'); audioElements.forEach(function(audio) { const audioFileName = audio.src.split('/').pop(); const audioFilePath = `story_content/${filename}`; if (audio.src.includes(audioFilePath)) { audio.muted = !audio.muted; } }); };- Publish your file to Web.
- Open the published folder and navigate to the story_content directory.
- Copy and paste the exact filename of the audio file you want to control.
Now, you can mute or unmute the specific audio file by executing JavaScript when the user clicks toggle button:
muteAudio('your-audio-file.mp3');
10 Replies
I don't believe an object has access to the volume property in the new API. Additionally, I don't think you can target an audio element as an object the way you've attempted.
If you want to mute just the theme music, one approach could be to have it play on a separate layer. This way, when the timeline starts on a slide, you can show the layer with the audio and manage its visibility as needed. Set the layer properties to "Resume saved state when revisited" to ensure it plays from where it left off.
On the slide with the object, you can create a mute button that toggles the visibility of the audio layer based on the mute button's state (for example, normal and selected). This will give you more control over "muting" the audio without affecting other audios on the slide.
I've attached a sample story file to demonstrate how this can be done. Try that before you consider tackling this problem with JavaScript.
Thanks for the suggestion Nedim. This isn't quite doing what I'm after. I would need the timeline on the layer to continue while it was was muted so that when it resumes, it's at the new spot on the timeline.
To see what I mean, use a shorter soundtrack (mine is 6.5 seconds) and set your button visibility for the same length of time. If you don't press the button at all, they'd both end at the same time.
But, if you do play with that button, I still want it to end at the same time. Not because the button turns it off before vanishing, but because it's reached the end of the soundtrack: like playing with the volume dial on a live radio show.
Try this JavaScript solution to manage audio on your slide. In the attached file, you’ll find two JavaScript triggers. One is executed when the user clicks a button, which contains a function muteAudio(1). The function will toggle the mute state of the audio you want to target. Depending on how many audio elements you have on the slide, the audio you want to toggle mute/unmute may be stored at index 0, 1, or 2. The second JavaScript trigger ensures that the "theme audio" will stop when the timeline of the slide ends. Specifically, the trigger will hide the theme audio once the first audio on the base layer reaches its end.
The first JavaScript function, muteAudio(index), is a global function that targets all audio elements on the slide. It isolates one based on the index you pass in, such as muteAudio(1). The function will mute or unmute the audio element at that particular index. If there are multiple audio elements on the slide, you can use this function to control the mute state of each one individually, depending on their position in the list (index 0, 1, or 2).
The trigger to hide the "theme audio" will be set to activate when the timeline reaches its end. This will ensure that the theme audio stops as soon as the first audio element on the base layer finishes playing.
Thanks for the link. That conversation seems to be about muting all audio. I'm not sure how to convert that to a single audio file. I've added a comment on there to see if they can help with that conversion.
Hello HoneyTurner,
Thanks for reaching out!
While we don't have an official Javascript solution to mute audio in Storyline 360, you can check out this thread, which contains solutions from other users that have been well-received by the community.
I'll let other community members jump in in case they have updated Javascript they'd be willing to share!
