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');
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');That's a great addition. I'm glad it worked!