El Atributo ONDURATIONCHANGE

El atributo ondurationchange es un evento de JavaScript que se activa cuando cambia la duración de un recurso multimedia (como <audio> o <video>). Es útil para detectar cuándo se carga la duración del contenido o cuando esta se actualiza (ej: en transmisiones en vivo). Este evento es clave para crear reproductores multimedia interactivos y actualizar información en tiempo real.

¿Qué hace ondurationchange?

Disparador: Cuando la propiedad duration del elemento multimedia cambia.

Casos comunes:

• Al cargar los metadatos del archivo (duración inicial).

• En transmisiones en vivo, cuando la duración se actualiza.

• Si el recurso no tiene duración fija (ej: duration = Infinity).

Valores de duration:

• NaN: Duración desconocida (antes de cargar los metadatos).

• Número positivo: Duración en segundos (ej: 180 para un audio de 3 minutos).

• Infinity: Contenido en vivo sin duración fija.

Sintaxis básica

Como atributo HTML:

<audio src="audio.mp3" ondurationchange="actualizarDuracion(this)">
</audio>

Con JavaScript (recomendado):

const video = document.getElementById("miVideo");
video.addEventListener("durationchange", () => {
  console.log("Duración actualizada:", video.duration);
});

Ejemplos prácticos

Ejemplo 1: Mostrar duración al cargar

<audio id="reproductor" src="musica.mp3"></audio>
<p id="duracion">Duración: Cargando...</p>

<script>
  const reproductor = document.getElementById("reproductor");
  const duracionTexto = document.getElementById("duracion");

  reproductor.addEventListener("durationchange", () => {
    if (!isNaN(reproductor.duration)) {
      duracionTexto.textContent = `Duración: ${reproductor.duration.toFixed(2)}s`;
    }
  });
</script>

Ejemplo 2: Manejar transmisiones en vivo

<video id="stream" controls>
  <source src="stream-en-vivo.m3u8" type="application/x-mpegURL">
</video>
<p id="estado">Estado: Cargando...</p>

<script>
  const video = document.getElementById("stream");
  const estado = document.getElementById("estado");

  video.addEventListener("durationchange", () => {
    if (video.duration === Infinity) {
      estado.textContent = "Transmisión en vivo";
    }
  });
</script>

Ejemplo 3: Actualizar barra de progreso

<video id="miVideo" src="video.mp4" controls></video>
<div class="progress-bar">
  <div id="progreso" style="width: 0%; height: 5px; background: red;"></div>
</div>

<script>
  const video = document.getElementById("miVideo");
  const progreso = document.getElementById("progreso");

  video.addEventListener("durationchange", () => {
    if (video.duration > 0) {
      video.addEventListener("timeupdate", () => {
        const porcentaje = (video.currentTime / video.duration) * 100;
        progreso.style.width = `${porcentaje}%`;
      });
    }
  });
</script>

Diferencias clave entre eventos

Evento	Descripción
ondurationchange	Cambios en la duración del contenido
onloadedmetadata	Metadatos cargados (incluida la duración)
ontimeupdate	Actualización del tiempo de reproducción

Mejores prácticas

Verificar valores válidos:

if (!isNaN(media.duration) && media.duration !== Infinity) {
  // Duración finita y conocida
}

Manejar transmisiones en vivo:

if (media.duration === Infinity) {
  console.log("Contenido en vivo");
}

Actualizar la UI:

• Convertir segundos a formato legible (ej: 120 → 2:00).

• Ocultar elementos de progreso en contenido en vivo.

Casos avanzados

Sincronizar múltiples elementos:

<audio id="audio1" src="audio1.mp3"></audio>
<audio id="audio2" src="audio2.mp3"></audio>

<script>
  const audio1 = document.getElementById("audio1");
  const audio2 = document.getElementById("audio2");

  function manejarDuracion() {
    if (!isNaN(audio1.duration) && !isNaN(audio2.duration)) {
      console.log("Ambos audios cargados");
    }
  }

  audio1.addEventListener("durationchange", manejarDuracion);
  audio2.addEventListener("durationchange", manejarDuracion);
</script>

Reproductor personalizado:

<div class="reproductor">
  <button id="playBtn">▶</button>
  <span id="tiempoActual">0:00</span>
  <input type="range" id="seekBar" min="0" max="100">
  <span id="duracionTotal">0:00</span>
</div>
<audio id="audio" src="cancion.mp3"></audio>

<script>
  const audio = document.getElementById("audio");
  const duracionTotal = document.getElementById("duracionTotal");

  audio.addEventListener("durationchange", () => {
    if (!isNaN(audio.duration)) {
      duracionTotal.textContent = formatearTiempo(audio.duration);
    }
  });

  function formatearTiempo(segundos) {
    const minutos = Math.floor(segundos / 60);
    const segs = Math.floor(segundos % 60);
    return `${minutos}:${segs.toString().padStart(2, '0')}`;
  }
</script>

Errores comunes

// MAL: Asumir que la duración está disponible inmediatamente
console.log(audio.duration); // NaN al principio

// CONFUSIÓN: No manejar Infinity
if (video.duration === Infinity) {
  // Contenido en vivo, ocultar barra de progreso
}

// OLVIDAR limpiar listeners
audio.addEventListener("durationchange", funcionGrande);
// Usar removeEventListener cuando sea necesario

Compatibilidad

Navegador	Soporte
Chrome	✅ Sí (v. 3+)
Firefox	✅ Sí (v. 3.5+)
Safari	✅ Sí
Edge	✅ Sí
Móviles	✅ Sí (iOS/Android)

Conclusión

El atributo ondurationchange es esencial para:

• Detectar cambios en la duración de contenido multimedia.
• Actualizar interfaces de reproductores personalizados.
• Manejar contenido en vivo y archivos estáticos de forma diferenciada.

Recuerda:

1. Verifica siempre si duration es un valor válido.
2. Formatea la duración para hacerla legible.
3. Combínalo con otros eventos multimedia (timeupdate, play).

¡Ahora puedes crear reproductores multimedia profesionales y altamente interactivos!