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;});