Mute button for entire hype project

Elements Audio & Video
1

I have a project (over 60 hype scenes) where I have audio starting on several scenes when they load up. My client has asked that I add a MUTE button so that the audio can be turned off completely and the user can run through all the scenes. They want the button to have an ON and OFF state so the user knows they have muted or can mute the audio.

This is not a normal website, it’s a mini training app so audio used on scene load is needed :smile:

2

Hi Craig (@craigah13)

It depends on how you've added your audio.

If you've added it by using code or by dragging it onto the scene then you could mute it using the .muted property. For example:

if (audioElement.muted) {
    audioElement.muted = "";
} else {
    audioElement.muted = "true";
}

audioElement is a variable that holds the audio instance so

var audioElement = document.createElement('audio');

or

var audioElement = document.getElementById('myAudio');

in your case you would probably need to collect all your audio in an array

var audioElements = document.getElementsByTagName('audio');
for(var i=0; i < audioElements.length; i++) {
    if (audioElements[i].muted) {
        audioElements[i].muted = "";
    } else {
        audioElements[i].muted = "true";
    }

You could add this Javascript to a button (or any element) using the "On Mouse Click"

This post might help you more.

1 Like
3

Thanks for the response.

If I use this option: Master Sound on/off function

Do I have to load the javascript to every single scene on scene load?

4

You only have to run the javascript once but you have to declare all the audio elements.

var audio1 = document.getElementById('**1st Audio**');
var audio2 = .....

etc

If you have several audio I would take the array approach where you would gather all the <audio> elements and then create a master mute button.

crude example:
masterMute.zip (1.1 MB)

1 Like