How to mute all sound in a page with JS? How to mute all sound in a page with JS? javascript javascript

How to mute all sound in a page with JS?


This can easily be done in vanilla JS:

// Mute a singular HTML5 elementfunction muteMe(elem) {    elem.muted = true;    elem.pause();}// Try to mute all video and audio elements on the pagefunction mutePage() {    var elems = document.querySelectorAll("video, audio");    [].forEach.call(elems, function(elem) { muteMe(elem); });}

or in ES6:

// Mute a singular HTML5 elementfunction muteMe(elem) {    elem.muted = true;    elem.pause();}// Try to mute all video and audio elements on the pagefunction mutePage() {    document.querySelectorAll("video, audio").forEach( elem => muteMe(elem) );}

This, of course, only works with <video> or <audio> elements, as items like Flash or JS initialized audio is impossible to restrict in general.


Rule #1: Never enable audio autoplay upon page loading.

Anyway I'll show for HTML5 using jQuery:

// WARNING: Untested code ;)window.my_mute = false;$('#my_mute_button').bind('click', function(){    $('audio,video').each(function(){        if (!my_mute ) {            if( !$(this).paused ) {                $(this).data('muted',true); //Store elements muted by the button.                $(this).pause(); // or .muted=true to keep playing muted            }        } else {            if( $(this).data('muted') ) {                $(this).data('muted',false);                $(this).play(); // or .muted=false            }        }    });    my_mute = !my_mute;});

Flash Media Players depends on the custom API (hopefuly) exposed to JavaScript.

But you get the idea, iterate through media, check/store playing status, and mute/unmute.


I did it like this:

[].slice.call(document.querySelectorAll('audio')).forEach(function(audio) {    audio.muted = true;});