javascript - musica - ¿Cómo silenciar todo el sonido en una página con JS?

reproductor de audio html

Question

¿Cómo puedo silenciar todo el sonido en mi página con JS?

Esto debería silenciar las etiquetas HTML5 <audio> y <video> junto con Flash y amigos.

Answer 1

Regla n. ° 1: Nunca habilite la reproducción automática de audio al cargar la página.

De todos modos, mostraré para HTML5 usando 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 Players depende de la API personalizada (con suerte) expuesta a JavaScript.

Pero obtienes la idea, iteras a través de los medios, verificas / guardas el estado de reproducción y silencia / anula el sonido.

Answer 2

Esto se puede hacer fácilmente en vainilla 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); });
}

Esto, por supuesto, solo funciona con elementos <video> o <audio> , ya que elementos como el audio inicializado de Flash o JS son imposibles de restringir en general.

Answer 3

Lo hice así:

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

Answer 4

Mantenga una referencia a todos los elementos de audio / video dentro de una matriz y luego realice una función que realice un ciclo sobre ellos mientras configura el .muted=true .