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.

We need more info. Can you elaborate? Is this in a plugin/users fit? — mplungjan, Dec 26 '12 at 18:48
@mplungjan, I have an audio icon on my page which will toggle sound on/off when clicked on. — TheOne, Dec 26 '12 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 '12 at 19:38

Zach Saucier · Answer 1 · 2023-06-23T14:39:58.147

30

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.

edited Jun 23 '23 at 14:39

answered May 13 '16 at 20:03

Zach Saucier

24,871
12
85
147

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 '23 at 09: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 – Zach Saucier Jun 23 '23 at 14:38

David Strencsev · Accepted Answer · 2013-03-11T13:19:00.970

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.

edited Mar 11 '13 at 13:19

answered Dec 26 '12 at 20:20

David Strencsev

1,065
11
11

isn't there something audio api that we could use...like reroute destination to new node and don't connect it to speaker? – Muhammad Umer Apr 20 '14 at 04:26
Only seen this when generating procedural audio with [WebAudio API](http://modernweb.com/2014/03/31/creating-sound-with-the-web-audio-api-and-oscillators/) – David Strencsev Jun 03 '15 at 07:22
1

Rule #0 never declare global variables – Frondor Jul 29 '22 at 18:32
Of course, ten years later it's better to store it in your Redux status than using a global variable. – David Strencsev Jul 31 '22 at 22:37

John Doherty · Answer 3 · 2021-03-07T18:15:02.947

6

I did it like this:

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

edited Mar 07 '21 at 18:15

answered Nov 15 '16 at 11:37

John Doherty

3,669
36
38

instead of Array.prototype.slice.call you can use Array.from – aljgom Aug 11 '20 at 19:23
replaced `Array.prototype.slice` with `[].slice` to make it more readable – John Doherty Mar 07 '21 at 18:15
I added an answer with what I meant too, I guess it's more ways to write it https://stackoverflow.com/a/66562772/3577695 – aljgom Mar 10 '21 at 10:27

score 5 · Answer 4 · answered Mar 10 '21 at 10:23

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)

answered Mar 10 '21 at 10:23

aljgom

7,879
3
33
28

score 1 · Answer 5 · answered Jul 15 '21 at 08:00

@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

Gooshan · Answer 6 · 2017-06-16T10:41:44.903

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.

edited Jun 16 '17 at 10:41

answered Mar 26 '13 at 14:52

Gooshan

2,361
1
20
15

can you explain your solution a bit more please – rob Feb 27 '14 at 13:12

How to mute all sound in a page with JS?

6 Answers6

Linked

Related