Muting Audio or Video

Elements Audio & Video
1

Here’s how you can create a Mute button with JavaScript (roughly based on these instructions: http://www.w3schools.com/tags/av_prop_muted.asp)

Select your audio or video element and adjust its ‘unique element ID’. You’ll need to target the unique element ID of each of your audio/video files.

To mute an element on all scenes, you could set a variable with JavaScript when clicking the mute button that sets:

var ismuted = true;

The above JavaScript would be the function that is triggered when clicking the ‘Mute’ button.

Next, we would need to detect whether the above button has been pressed. Run the following ‘on scene load’ to then mute any audio or video elements you have:

if (ismuted === true) {
 document.getElementById("audio1").muted = true;
 document.getElementById("audio2").muted = true;
} else { 

};

Your ‘unmute’ button would run this script:

var ismuted = false;

The above example assumes that you have an audio element with the id audio1 and audio2. The Element ID is set in the Identity inspector when an element is selected, or by setting a standard id="" value for your element.

For documents with larger numbers of Audio elements, you can programmatically add audio to your document (and follow muting rules) by following these instructions.

2 Likes
2

Thank you. Please excuse me as I am quite new to this.

If I want the same button to both mute and unmute, how would I do this?

Currently I am using this function to mute:
var video = document.getElementById(“video1”); video.muted= true;
and the following to unmute: var video = document.getElementById(“video1”); video.muted= true;

I want it combined into 1 button. Please assist

3

use this function “On Mouse Click” on any element you wish to use as the mute button.

var video = document.getElementById("video1");

if (ismuted === true) {
    video.muted = false;
    ismuted = false;
} else {
    video.muted = true;
    ismuted = true;
}

in your first scene “on scene load” you would set up the variable “ismuted” (NOTE it is global so you can access it in any function)

window.ismuted = false;

muteUnmuteVideo.hype.zip (783.2 KB)

1 Like
4

Thank you, works great.

How would I add an image to the mute and unmet functions (currently saying “Mute” “Unmute”

Thanks

5

in the code in my example you will see “element.innerHTML” which is controlling what you see inside the element that is calling the function. You could add

element.innerHTML = '<img src="" width="" height="">';
6

Thanks again.

I am assuming my link is broken as I get a ? when I preview. how do I direct the link.

7

You would have to put in your own path to your image

<img src="http://path-to-your-image">

if it is somewhere on the web or

<img src="${resourcesFolderName}/YOUR-IMAGE.jpg">

if it is in your resources

8

So, all works fine except when I preview on iOS. For some reason my Tap/play functionality works but the mute/unmute does not.

Any idea why?

9

This is unfortunately an iOS issue. It won’t allow changing of volume via Javascript. Only the built in controls.

10

Hi
And thank you for sharing!
I have a video banner that I would like to start without sound an then have the button to put it on.
I used your project and everything works fine except it starts with the audio on.

If I change this -> window.ismuted = true; it still plays the sound on load.

Any suggestions?

Thanks

11

you may add an example-file.

12

Hi.

How would you use that code if we force a video to autoplay and to be silent? Because we need to silent the video in order to autoplay it.

It seems that the silent option prevails on your code.

13

The examples in this thread actually set the ismuted under the presumption of a known initial condition. You can always just use the real condition and derive it from the video in question as video.muted is also a getter of the property. Hence, replace ismuted with the actual getter to act on the current value state.

https://www.w3schools.com/tags/av_prop_muted.asp

14

It works! Thank you.