28

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

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

5
  • 1
    We need more info. Can you elaborate? Is this in a plugin/users fit?
    – mplungjan
    Dec 26, 2012 at 18:48
  • 1
    @mplungjan, I have an audio icon on my page which will toggle sound on/off when clicked on.
    – TheOne
    Dec 26, 2012 at 18:51
  • Sound playing in Flash is completely separate from sound playing in HTML/JavaScript. Look at the API's you used to play the sounds, they usually have methods to stop the sound and adjust the volume.
    – Sunil D.
    Dec 26, 2012 at 19:38
  • @Shmiddty tell that to youtube!
    – TheOne
    Dec 26, 2012 at 19:41
  • @Ramin I highly doubt you are working on Youtube.
    – Shmiddty
    Dec 26, 2012 at 19:45

6 Answers 6

31

This can 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() {
    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 are impossible to restrict programmatically in general.

2
  • This also unfortunately doesn't work for those elements in iframes (which is very typical for advertisements..). In general this, (and even less the other answers), are not a good solution.
    – Christian
    Jun 23, 2023 at 9:42
  • @Christian it's the best solution that there is :) if the iframes are on the same domain then you can use this approach for it, though it's a little more involved Jun 23, 2023 at 14:38
8

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.

4
  • isn't there something audio api that we could use...like reroute destination to new node and don't connect it to speaker? Apr 20, 2014 at 4:26
  • Only seen this when generating procedural audio with WebAudio API Jun 3, 2015 at 7:22
  • 1
    Rule #0 never declare global variables
    – Frondor
    Jul 29, 2022 at 18:32
  • Of course, ten years later it's better to store it in your Redux status than using a global variable. 😉 Jul 31, 2022 at 22:37
6

I did it like this:

[].slice.call(document.querySelectorAll('audio')).forEach(function(audio) {
    audio.muted = true;
});
3
  • instead of Array.prototype.slice.call you can use Array.from
    – aljgom
    Aug 11, 2020 at 19:23
  • replaced Array.prototype.slice with [].slice to make it more readable Mar 7, 2021 at 18:15
  • I added an answer with what I meant too, I guess it's more ways to write it stackoverflow.com/a/66562772/3577695
    – aljgom
    Mar 10, 2021 at 10:27
5

You can do

[...document.querySelectorAll('audio, video')].forEach(el => el.muted = true)

or

Array.from(document.querySelectorAll('audio, video')).forEach(el => el.muted = true)
1

@zach-saucier

function muteMe(elem) {elem.muted = false;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); });
}

This worked for me

0

Hold a reference to all audio/video elements inside an array and then make a function which performs a loop over them while setting the .muted=true.

1
  • can you explain your solution a bit more please
    – rob
    Feb 27, 2014 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.