web-dev-qa-db-ja.com

JSでページ内のすべてのサウンドをミュートする方法は？

JSを使用してページ上のすべてのサウンドをミュートするにはどうすればよいですか？

HTML5をミュートする必要があります<audio>および<video>タグと一緒にFlashや友達と一緒に。

javascripthtmlflashaudiomute
21
TheOne

ルール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 Playerは、JavaScriptに公開されたカスタムAPI（希望どおり）に依存しています。

しかし、アイデアを得て、メディアを反復処理し、再生ステータスを確認/保存し、ミュート/ミュート解除します。

8
David Strencsev

これは、バニラ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で初期化されたオーディオなどのアイテムは、一般に制限することができないためです。

19
Zach Saucier

配列内のすべてのオーディオ/ビデオ要素への参照を保持してから、.muted=trueを設定しながらそれらの要素に対してループを実行する関数を作成します。

1
Gooshan

私はそれをこのようにしました：

Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {
    audio.muted = true;
});
0
John Doherty