JavaScript Document durationchange Event: The Complete Guide

JavaScript has a lot of events that can help us interact with web elements. One of these events is the durationchange event. This guide will explain what it is, why and when you might need it, how to use it, and provide examples to make it all clear and fun to learn.

What is the durationchange Event?

The durationchange event is a special type of event in JavaScript. It is triggered when the duration attribute of a media element, like a video or audio, changes. This can happen when you load a new media file or when the length of the current media file changes.

Why Use the durationchange Event?

Using the durationchange event allows you to respond to changes in the duration of media elements. This is useful for updating the user interface, like showing the total time of a video, or for triggering other actions based on the duration.

Where Can You Use the durationchange Event?

You can use the durationchange event with any HTML media element, such as <audio> and <video>. This event helps you keep track of the media’s duration and make your web applications more interactive and user-friendly.

How to Use the durationchange Event

Let’s dive into some examples to see how to use the durationchange event in real scenarios.

Basic Example

Here’s a simple example to show how the durationchange event works. We will display the duration of a video when it changes.

HTML
<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

<p id="durationDisplay">Duration: 0 seconds πŸ“</p>

<script>
  const video = document.getElementById("myVideo");
  const durationDisplay = document.getElementById("durationDisplay");

  video.addEventListener("durationchange", () => {
    durationDisplay.textContent = `Duration: ${video.duration} seconds πŸ“`;
  });
</script>

Advanced Example

Now, let’s see a more complex example where we handle multiple media elements and update their durations.

HTML
<audio id="myAudio" controls>
  <source src="song.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

<p id="audioDuration">Audio Duration: 0 seconds 🎡</p>
<p id="videoDuration">Video Duration: 0 seconds 🎬</p>

<script>
  const audio = document.getElementById("myAudio");
  const video = document.getElementById("myVideo");
  const audioDurationDisplay = document.getElementById("audioDuration");
  const videoDurationDisplay = document.getElementById("videoDuration");

  audio.addEventListener("durationchange", () => {
    audioDurationDisplay.textContent = `Audio Duration: ${audio.duration} seconds 🎡`;
  });

  video.addEventListener("durationchange", () => {
    videoDurationDisplay.textContent = `Video Duration: ${video.duration} seconds 🎬`;
  });
</script>

Example with Dynamic Media Source Change

Let’s see how the durationchange event works when you change the media source dynamically.

HTML
<audio id="myAudio" controls>
  <source src="song.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

<p id="audioDuration">Audio Duration: 0 seconds 🎡</p>
<p id="videoDuration">Video Duration: 0 seconds 🎬</p>

<script>
  const audio = document.getElementById("myAudio");
  const video = document.getElementById("myVideo");
  const audioDurationDisplay = document.getElementById("audioDuration");
  const videoDurationDisplay = document.getElementById("videoDuration");

  audio.addEventListener("durationchange", () => {
    audioDurationDisplay.textContent = `Audio Duration: ${audio.duration} seconds 🎡`;
  });

  video.addEventListener("durationchange", () => {
    videoDurationDisplay.textContent = `Video Duration: ${video.duration} seconds 🎬`;
  });
</script>

In this example, when you click the “Change Video Source” button, the video source changes, triggering the durationchange event.

When to Use the durationchange Event

The durationchange event is especially useful in scenarios where:

  • You have media elements with varying durations.
  • You need to update UI elements based on the media duration.
  • You handle user interactions that change media sources.

Comparing durationchange with Other Media Events

To understand the durationchange event better, let’s compare it with other media events.

EventDescriptionExample Usage
durationchangeFired when the duration attribute has been updatedUpdate UI when media duration changes
playFired when the media begins to playLog a message when playback starts
pauseFired when the media is pausedLog a message when playback pauses
endedFired when playback reaches the end of the mediaShow a replay button
timeupdateFired when the playback position changes (e.g., seek)Update a progress bar

Code Examples of Different Events

Here’s how you can use some of these events in your code:

HTML
<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

<p id="status">Status: Not started ⏸️</p>

<script>
  const video = document.getElementById("myVideo");
  const statusDisplay = document.getElementById("status");

  video.addEventListener("play", () => {
    statusDisplay.textContent = "Status: Video is playing ▢️";
  });

  video.addEventListener("pause", () => {
    statusDisplay.textContent = "Status: Video is paused ⏸️";
  });

  video.addEventListener("ended", () => {
    statusDisplay.textContent = "Status: Video ended πŸŽ‰";
  });

  video.addEventListener("timeupdate", () => {
    statusDisplay.textContent = `Current time: ${video.currentTime} seconds ⏱️`;
  });
</script>

Conclusion

The durationchange event is a powerful tool in JavaScript that helps you manage and respond to changes in the duration of media elements. By understanding and using this event, you can create more dynamic and user-friendly web applications. Whether you’re working with videos or audio files, the durationchange event can enhance the interactivity and functionality of your projects.

Summary

  • What: The durationchange event fires when the duration of a media element changes.
  • Why: It helps in updating UI elements and handling duration-based actions.
  • Where: Use it with HTML media elements like <audio> and <video>.
  • How: By adding an event listener for durationchange and updating the necessary elements.
  • When: Use it whenever you need to respond to changes in media duration, especially with dynamic media sources.

Feel free to use the examples provided and modify them to suit your needs. Happy coding! πŸŽ‰

What are JavaScript Browser Events?

JavaScript browser events are key to creating interactive web applications. These events are actions or occurrences detected by the browser, such as user interactions, document changes, or window modifications. By responding to events like clicks, key presses, and form submissions, developers can enhance user experience and functionality.

This comprehensive list of JavaScript browser events is a valuable reference for developers. It covers a wide range of events, from mouse and keyboard actions to document and window changes. Understanding and handling these events is essential for building responsive and engaging web applications, ensuring a seamless and intuitive user experience.

See List of all JavaScript Browser Events – Cheat Sheet

  • Document events:
    • ended
    • error
    • loadeddata
    • loadedmetadata
    • loadstart
    • pause
    • play
    • playing
    • progress
    • ratechange
    • seeked
    • seeking
    • stalled
    • suspend
    • timeupdate
    • volumechange
    • waiting
    • emptied
    • durationchange
    • cuechange
    • change
    • canplaythrough
    • canplay
    • abort
    • DOMContentLoaded
  • Window events:
    • afterprint
    • beforeprint
    • beforeunload
    • error
    • hashchange
    • load
    • message
    • offline
    • online
    • pagehide
    • pageshow
    • popstate
    • resize
    • scroll
    • storage
    • unload
  • Form events:
    • submit
    • select
    • reset
    • invalid
    • input
    • focus
    • change
    • blur
  • Keyboard events:
    • keyup
    • keypress
    • keydown
  • Mouse events:
    • wheel
    • mouseup
    • mouseover
    • mouseout
    • mousemove
    • mouseleave
    • mouseenter
    • mousedown
    • dblclick
    • contextmenu
    • click

Leave a Reply