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

【问题标题】：How to mute all sound in a page with JS?如何使用 JS 将页面中的所有声音静音？
【发布时间】：2012-12-12 06:11:29
【问题描述】：

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

这应该使 HTML5 <audio> 和 <video> 标记以及 Flash 和朋友静音。

【问题讨论】：

我们需要更多信息。你能详细说明吗？这适合插件/用户吗？
@mplungjan，我的页面上有一个音频图标，点击它会打开/关闭声音。
Flash 中的声音播放与 HTML/JavaScript 中的声音播放完全不同。看看你用来播放声音的API，它们通常有停止声音和调节音量的方法。
@Shmiddty 告诉 youtube！
@Ramin 我非常怀疑你在 Youtube 上工作。

标签： javascript html flash audio mute

【解决方案1】：

规则 #1：永远不要在页面加载时启用音频自动播放。

无论如何，我将使用 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 媒体播放器依赖于暴露给 JavaScript 的自定义 API（希望如此）。

但你明白了，遍历媒体，检查/存储播放状态，以及静音/取消静音。

【讨论】：

没有我们可以使用的音频 api...比如将目的地重新路由到新节点并且不将其连接到扬声器？
只有在使用WebAudio API生成程序音频时才看到这个

【解决方案2】：

保持对数组内所有音频/视频元素的引用，然后在设置.muted=true 时创建一个对它们执行循环的函数。

【讨论】：

你能解释一下你的解决方案吗

【解决方案3】：

这可以在原版 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() {
    var elems = document.querySelectorAll("video, audio");

    [].forEach.call(elems, function(elem) { muteMe(elem); });
}

或者在 ES6 中：

// 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 初始化音频等项目通常无法限制。

【讨论】：

【解决方案4】：

我是这样做的：

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

【讨论】：

你可以使用 Array.from 代替 Array.prototype.slice.call
将 Array.prototype.slice 替换为 [].slice 使其更具可读性
我也添加了我的意思的答案，我想这是更多的写法stackoverflow.com/a/66562772/3577695

【解决方案5】：

你可以的

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

或

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

【讨论】：

【解决方案6】：

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

这对我有用

【讨论】：