Forum Discussion
Muting Audio in Timeline
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');
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.
I don't quite follow all the lines in your more complex javascript, but it looks like you're creating a global muteAudio function which I can call at whim.
I was able to figure out the index I needed.I feel confident I can tweak this so that it remembers the last setting when revisiting.
I'm nearly successful. I've assigned a variable that it reads and toggles correctly. I used your function as a template to create 3 functions: playAudio, muteAudio and toggleAudio. This allowed me to control the starting state, then toggle naturally thereafter.
But, it needs a more reliable way of identifying the index initially. If I add other audio tracks to the project, it breaks the functionality. Even the difference of previewing just the single slide versus playing the full project will break it. Is there a way for it to identify using the file name?
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');That worked perfectly Nedim. Thank you so much for your patience.
Here's the final code that I used. A slight variation so I could define the starting state and not just toggle.
window.muteAudio = function(action,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 = action; } }); };and I called it using this. mute is a true/false variable.
let jsMute = getVar('mute'); muteAudio(jsMute, '5wlLQouJOmG_44100_160_0.mp3');