javascripthtmlflashaudiomute

How to mute all sound in a page with JS?


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

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


Solution

  • 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.