Muting Audio or 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;

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


Creating Play & Pause Buttons for Video
Controlling Audio & Advanced Techniques (Play, Pause, Rewind, Volume control)
Mute embeded video whith buttom
How to make a toggle button to toggle Audio Mute?
(Stephan) #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)


(Stephan) #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="">';

(Stephan) #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


(Stephan) #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.