HTML ondurationchange Attribute

Introduction

The ondurationchange attribute is an inline event handler that runs JavaScript when the durationchange event fires. That happens on <audio> and <video> whenever element.duration changes. Before metadata loads, duration is NaN; once the browser knows the total length, duration becomes a number in seconds and durationchange fires. Use it to update progress bars, show total runtime, or react when a live stream length changes. It does not fire on every playback tick—use ontimeupdate for current position.

What You’ll Learn

Purpose of ondurationchange Attribute

The primary purpose of ondurationchange is to react when the browser learns or updates the total length of media. You might format and display runtime (“3:42”), enable a seek bar, or log when a stream’s duration shifts. The event is part of the media loading lifecycle alongside loadedmetadata, loadeddata, and canplay.

Read element.duration inside the handler—it is in seconds. Before metadata arrives, duration is NaN. The old reference used alert() in demos—avoid that in real apps. Status text or UI updates are clearer.

📝 Syntax

Set ondurationchange on audio or video, or assign element.ondurationchange:

<script>

  function handleDurationChange(el) {

    var secs = Math.floor(el.duration);

    console.log("Duration: " + secs + " seconds");

  }

</script>



<audio controls ondurationchange="handleDurationChange(this)">

  <source src="song.mp3" type="audio/mpeg">

</audio>

Syntax Rules

• Value is JavaScript code executed when the durationchange event fires.
• Applies to <audio> and <video> media elements.
• Fires when element.duration changes (including NaN → number).
• JavaScript: media.ondurationchange = function() { … }.
• Modern alternative: media.addEventListener("durationchange", handler).
• May fire again if duration updates (e.g. live streams or source swap).

💎 Values

The ondurationchange attribute accepts a string of JavaScript code:

• ondurationchange="handleDurationChange(this)" — Pass the element to a function.
• ondurationchange="updateRuntime()" — Call a named function.
• JavaScript: video.ondurationchange = () => { … } assigns the handler.

const audio = document.getElementById("track");

audio.addEventListener("durationchange", () => {

  const secs = Math.floor(audio.duration);

  document.getElementById("runtime").textContent = secs + " seconds";

});

Applicable Elements

ondurationchange vs onloadedmetadata vs onloadeddata vs oncanplay

Examples Gallery

Inline ondurationchange on audio, dynamic property assignment, and durationchange vs loadedmetadata.

<audio controls ondurationchange="handleDurationChange(this)">

  <source src="song.mp3" type="audio/mpeg">

</audio>



<script>

  function handleDurationChange(el) {

    var secs = Math.floor(el.duration);

    console.log("Duration: " + secs + " seconds");

  }

</script>

<script>

  var video = document.getElementById("clip");

  video.ondurationchange = function () {

    var secs = Math.floor(video.duration);

    console.log("Duration: " + secs + " seconds");

  };



  // Or addEventListener form:

  video.addEventListener("durationchange", function () { /* … */ });

</script>

console.log(audio.duration); // NaN before metadata

audio.addEventListener("loadedmetadata", () => { /* metadata ready */ });

audio.addEventListener("durationchange", () => {

  console.log(Math.floor(audio.duration) + " seconds");

});

♿ Accessibility

• Expose total duration in UI — Screen reader users benefit when runtime is visible and announced (e.g. “3 minutes 42 seconds”).
• Do not rely on duration alone for controls — Provide native controls or fully accessible custom players with keyboard support.
• Avoid alert() on durationchange — Update visible status or progress labels instead of blocking dialogs.
• Handle unknown duration gracefully — Show “Live” or “Loading…” while duration is NaN.
• Captions and transcripts — Media events do not replace accessible alternatives for audio and video content.

💡 Best Practices