首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用JS将页面中的所有声音静音?

如何使用JS将页面中的所有声音静音?
EN

Stack Overflow用户
提问于 2012-12-27 02:42:36
回答 6查看 50.6K关注 0票数 25

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

这应该会将HTML5、<audio><video>标签以及Flash和朋友设置为静音。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2012-12-27 04:20:24

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

无论如何,我将使用jQuery为HTML5演示:

代码语言:javascript
复制
// 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 Player依赖于向JavaScript公开的自定义应用程序接口(希望如此)。

但是你得到了这个想法,通过媒体迭代,检查/存储播放状态,以及静音/取消静音。

票数 8
EN

Stack Overflow用户

发布于 2016-05-14 04:03:31

这可以在vanilla JS中轻松完成:

代码语言:javascript
复制
// 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中:

代码语言:javascript
复制
// 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初始化音频这样的项通常是不可能限制的。

票数 27
EN

Stack Overflow用户

发布于 2016-11-15 19:37:58

我是这样做的:

代码语言:javascript
复制
[].slice.call(document.querySelectorAll('audio')).forEach(function(audio) {
    audio.muted = true;
});
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14044761

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档