Mute the browser window using JS or jQuery

Question

Is there a way to mute all sound in a browser window that may have embedded videos?

I am not looking for specific solutions like targeting on Youtube with js etc. I need something in common that will turn off all the sound for this page, so if any video plays it, there is no sound. Something is needed that turns off the sound at the page level, rather than individually addressing each player through js, etc.

I don’t know anything that could do this, but I thought I would ask.

Thanks so much if you can point me in the right direction.

PS: I know about How to turn off sound on a page using JS? but that’s not what I need.

Answer 1

You need to iterate through all the audio / video tags and set the volume to 0.

HTML

<div id="mute-button"><img src=""/><div>

JQuery

$('#mute-button').on('click', function(){

    $('audio,video').each(function(){
       $(this).volume = 0.0;
    });

});

Alternatively, you can pause the source:

$(this).pause();

For other inline tags ( youtube , vimeo ..), check out this discussion .