How to mute all sound in a page with JS?

Question

How can I mute all sound on my page with JS?

This should mute HTML5 <audio> and <video> tags along with Flash and friends.

Answer 1

This can easily be done in vanilla JS:

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

or in ES6:

// Mute a singular HTML5 element function muteMe(elem) {     elem.muted = true;     elem.pause(); }  // Try to mute all video and audio elements on the page function 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.

Answer 2

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.