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

Question

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

这应该将HTML5 <audio>和<video>标签与Flash和朋友一起静音.

Answer 1

这可以在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() {
    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初始化音频这样的项目通常不可能限制.

Answer 2

规则#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 Media Players依赖于暴露给JavaScript的自定义API(hopefuly).

但是你得到了这个想法,遍历媒体,检查/存储播放状态,以及静音/取消静音.

Answer 3

我是这样做的：

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

Answer 4

你可以做

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

或者

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