Как отключить звук на странице с помощью JS?

Как отключить звук на моей странице с помощью JS?

Это должно отключить HTML5 <audio> и <video> теги вместе с Flash и друзьями.

16
audio flash html5 javascript mute

4 ответов

Правило #1: Никогда не включайте автозапуск звука при загрузке страницы.

в любом случае я покажу для HTML5 с помощью jQuery:

// 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 зависит от пользовательского API (hopefuly), предоставляемого JavaScript.

но вы получаете идею, перебираете медиа, проверяете / сохраняете статус воспроизведения и отключаете/отключаете звук.

7

Это можно легко сделать в ванили 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 videos = document.querySelectorAll("video"),
        audios = document.querySelectorAll("audio");

    [].forEach.call(videos, function(video) { muteMe(video); });
    [].forEach.call(audios, function(audio) { muteMe(audio); });
}

или в 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").forEach( video => muteMe(video) );
    document.querySelectorAll("audio").forEach( audio => muteMe(audio) );
}

Это, конечно, работает только с <video> или <audio> элементы, как элементы, такие как Flash или JS инициализированный звук невозможно ограничить в целом.

13

Я сделал это так:

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

удерживайте ссылку на все аудио / видео элементы внутри массива, а затем сделайте функцию, которая выполняет цикл над ними при установке .muted=true.

1