El Atributo ONVOLUMECHANGE

Se activa cuando el volumen de un elemento multimedia cambia o cuando el sonido se silencia.

El atributo onvolumechange se activa cuando el volumen de un elemento multimedia cambia (ya sea por el usuario o programáticamente) o cuando el sonido se silencia. Es esencial para crear controles de volumen personalizados y sincronizar interfaces.

???? Sintaxis básica

<!-- En HTML -->
<video 
    src="video.mp4" 
    controls 
    onvolumechange="manejarCambioVolumen(event)"
></video>

<!-- En JavaScript -->
<script>
  const media = document.getElementById("miMedia");
  media.addEventListener("volumechange", (event) => {
    // Lógica aquí
  });
</script>

Run HTML

???? Propiedades clave

volume: Valor del volumen (0.0 a 1.0).
muted: Estado de silencio (true/false).

???? Ejemplos prácticos

1. Mostrar el volumen actual

<video id="reproductor" src="video.mp4" controls></video>
<p>Volumen: <span id="indicadorVolumen">100%</span></p>

<script>
  const video = document.getElementById("reproductor");
  
  video.addEventListener("volumechange", () => {
    const porcentaje = Math.round(video.volume * 100);
    document.getElementById("indicadorVolumen").textContent = `${porcentaje}%`;
  });
</script>

Run HTML

2. Controlador de volumen personalizado

<video id="miVideo" src="video.mp4"></video>
<div class="controles">
  <button onclick="cambiarSilencio()">????</button>
  <input 
    type="range" 
    min="0" 
    max="1" 
    step="0.1" 
    value="1"
    oninput="cambiarVolumen(this.value)"
  >
</div>

<script>
  const video = document.getElementById("miVideo");
  const botonVolumen = document.querySelector("button");

  // Cambiar volumen con el slider
  function cambiarVolumen(valor) {
    video.volume = valor;
  }

  // Alternar silencio
  function cambiarSilencio() {
    video.muted = !video.muted;
    actualizarIcono();
  }

  // Actualizar icono del botón
  function actualizarIcono() {
    botonVolumen.textContent = video.muted ? "????" : "????";
  }

  // Escuchar cambios automáticos (ej: teclas de volumen del sistema)
  video.addEventListener("volumechange", actualizarIcono);
</script>

Run HTML

???? Casos de uso avanzados

1. Sincronizar volumen entre pestañas

// Al cambiar el volumen, guardar en localStorage
video.addEventListener("volumechange", () => {
  localStorage.setItem("volumenGlobal", video.volume);
  localStorage.setItem("mutedGlobal", video.muted);
});

// Escuchar cambios en otras pestañas
window.addEventListener("storage", (event) => {
  if (event.key === "volumenGlobal") {
    video.volume = event.newValue;
  }
  if (event.key === "mutedGlobal") {
    video.muted = (event.newValue === "true");
  }
});

2. Integración con API de audio

let audioContext;
let gainNode;

video.addEventListener("volumechange", () => {
  if (!audioContext) {
    audioContext = new AudioContext();
    const source = audioContext.createMediaElementSource(video);
    gainNode = audioContext.createGain();
    source.connect(gainNode).connect(audioContext.destination);
  }
  gainNode.gain.value = video.volume; // Controlar ganancia de audio
});

⚠️ Consideraciones importantes

1. Compatibilidad

Navegador	Soporte
Chrome	✅ 15+
Firefox	✅ 12+
Safari	✅ 6+
Edge	✅ 12+

2. Mejores prácticas

Accesibilidad: Añadir etiquetas ARIA a los controles.

Manejo de valores extremos:

video.volume = Math.max(0, Math.min(1, nuevoVolumen)); // Forzar rango 0-1

Eventos duplicados: Algunas acciones (como mutar) pueden disparar múltiples eventos.

???? Trucos útiles

1. Normalizar valores de volumen

inputRange.addEventListener("input", (e) => {
  const valor = parseFloat(e.target.value);
  video.volume = Math.pow(valor, 2); // Curva logarítmica para percepción humana
});

2. Animación suave de cambios

function ajusteSuaveVolumen(nuevoVolumen) {
  const duracion = 1000; // 1 segundo
  const pasos = 20;
  const delta = (nuevoVolumen - video.volume) / pasos;
  
  for (let i = 0; i < pasos; i++) {
    setTimeout(() => {
      video.volume += delta;
    }, i * (duracion / pasos));
  }
}

???? Conclusión

El atributo onvolumechange permite:

Crear controles de volumen personalizados
Sincronizar estados entre componentes
Integrar con sistemas de audio avanzados
Mejorar la experiencia multimedia

Ejemplo final avanzado (Control de volumen maestro):

<video id="video1" src="videoA.mp4"></video>
<video id="video2" src="videoB.mp4"></video>

<input 
  type="range" 
  min="0" 
  max="1" 
  step="0.01" 
  oninput="controlarVolumenMaestro(this.value)"
>

<script>
  const videos = [...document.querySelectorAll("video")];
  
  function controlarVolumenMaestro(valor) {
    videos.forEach(video => {
      video.volume = valor;
    });
  }
</script>

Run HTML

Con estos conceptos, podrás implementar controles de volumen profesionales y adaptativos en tus proyectos multimedia. ¡Experimenta y ajusta según tus necesidades! ????️????