如何使用JS静音页面中的所有声音？

Question

如何使用JS静音页面上的所有声音？

这应该会将HTML5中的<audio>和<video>标签以及Flash和其他相关内容全部静音。

- TheOne

---

我们需要更多信息。你能详细说明一下吗？这是在插件/用户适配器中吗？ - mplungjan

@mplungjan，我在我的页面上有一个音频图标，当单击它时会切换声音开/关。 - TheOne

在Flash中播放音频与在HTML/JavaScript中播放音频完全是独立的。请查看您用于播放音频的API，它们通常会有停止音频和调整音量的方法。 - Sunil D.

@Shmiddty 去告诉YouTube吧！ - TheOne

@Ramin 我非常怀疑你正在YouTube上工作。 - Shmiddty

Answer 1

这可以用原生 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));
}

当然，这只适用于<video>或<audio>元素，因为像Flash或JS初始化的音频等项目通常无法以编程方式限制。

- Zach Saucier

---

这对于那些在 iframes 中的元素也很不幸地不起作用（这在广告上非常常见）。总的来说，这个方法（甚至其他答案）都不是一个好的解决方案。 - Christian

@Christian 这是最好的解决方案 :) 如果 iframes 在同一个域名下，你可以使用这种方法，尽管它会稍微复杂一些。 - Zach Saucier

Answer 2

第一条规则：切勿在页面加载时启用音频自动播放。

无论如何，我将展示使用jQuery的HTML5：

// 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媒体播放器依赖于自定义API（希望）暴露给JavaScript。

但是你可以通过遍历媒体，检查/存储播放状态以及静音/取消静音来实现这一点。

- David Strencsev

---

有没有什么音频API可以使用...比如将目标重新路由到新节点并不连接到扬声器？ - Muhammad Umer

只有在使用WebAudio API生成过程音频时才会出现这种情况。 - David Strencsev

规则 #0：永远不要声明全局变量。 - Frondor

当然，十年后最好将其存储在Redux状态中，而不是使用全局变量。 - David Strencsev

Answer 3

我是这样做的：

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

- John Doherty

---

你可以使用 Array.from 替代 Array.prototype.slice.call。 - aljgom

用[].slice替换Array.prototype.slice，使其更易读。 - John Doherty

我也添加了一个答案，我想这是更多的写法。https://dev59.com/XmYq5IYBdhLWcg3w-VZl#66562772 - aljgom

Answer 4

您可以这样做

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

或者

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

- aljgom

Answer 5

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

这对我有效。

- Adatta1276

Answer 6

将所有音频/视频元素的引用保存在数组中，然后创建一个函数，在循环遍历它们时设置.muted=true。

- Gooshan

---

你能否详细解释一下你的解决方案？ - rob