web-dev-qa-db-fra.com

Comment couper tous les sons d'une page avec JS?

Comment couper tous les sons de ma page avec JS?

Cela devrait désactiver HTML5 <audio> et <video> tags avec Flash et amis.

javascripthtmlflashaudiomute
21
TheOne

Règle n ° 1: n'activez jamais la lecture automatique audio lors du chargement de la page.

Quoi qu'il en soit, je vais montrer pour HTML5 en utilisant 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;

});

Les lecteurs Flash Media dépendent de l'API personnalisée (espérons-le) exposée à JavaScript.

Mais vous avez l'idée, parcourez les médias, vérifiez/stockez le statut de lecture et désactivez/réactivez le son.

8
David Strencsev

Cela peut facilement être fait dans 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); });
}

ou dans 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) );
}

Ceci, bien sûr, ne fonctionne qu'avec <video> ou <audio> éléments, car des éléments tels que Flash ou l'audio initialisé JS sont impossibles à restreindre en général.

19
Zach Saucier

Maintenez une référence à tous les éléments audio/vidéo à l'intérieur d'un tableau, puis créez une fonction qui effectue une boucle sur eux tout en définissant .muted=true.

1
Gooshan

Je l'ai fait comme ça:

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