HTML Audio controller Property: Media Controller

HTML Audio controller Property: Media Controller

The controller property of the HTML <audio> element allows you to associate a MediaController object with the audio element. A MediaController is a unified way to control media elements (like <audio> and <video>) from a single point, offering advanced control and synchronization capabilities. This guide will explore the purpose, syntax, and practical examples of the controller property.

What is the controller Property?

The controller property is used to get or set the MediaController associated with an <audio> element. It provides a centralized control mechanism, allowing you to manage the playback state, current time, volume, and other properties of multiple media elements simultaneously.

Purpose of the controller Property

The primary purpose of the controller property is to:

• Synchronize playback across multiple media elements.
• Implement custom media control interfaces.
• Coordinate media playback in complex web applications.
• Control audio and video elements from a single point.

Syntax

The syntax for getting and setting the controller property is as follows:

Getting the controller

let mediaController = audioObject.controller;

Setting the controller

audioObject.controller = mediaControllerObject;

Where:

• audioObject is a reference to the HTML <audio> element.
• mediaControllerObject is an instance of the MediaController object.
• mediaController retrieves the associated MediaController object.

MediaController Attributes

Here is a list of common attributes you can use with a MediaController:

Examples

Let’s explore some examples to demonstrate how to use the controller property with the HTML Audio element.

Basic Example: Associating a MediaController

This example demonstrates how to associate a MediaController with an audio element and control it.

<audio id="myAudioControllerAudio" src="https://www.w3schools.com/html/horse.ogg" controls></audio>
<br />
<button id="myAudioControllerPlayButton">Play</button>
<button id="myAudioControllerPauseButton">Pause</button>

<script>
  const myAudioControllerAudioElement = document.getElementById("myAudioControllerAudio");
  const myAudioControllerPlayButton = document.getElementById("myAudioControllerPlayButton");
  const myAudioControllerPauseButton = document.getElementById("myAudioControllerPauseButton");

  const myAudioController = new MediaController();
  myAudioControllerAudioElement.controller = myAudioController;

  myAudioControllerPlayButton.addEventListener("click", function () {
    myAudioController.play();
  });

  myAudioControllerPauseButton.addEventListener("click", function () {
    myAudioController.pause();
  });
</script>

In this example:

• We create an audio element with the id myAudioControllerAudio.
• We create a MediaController object.
• We associate the MediaController with the audio element using myAudioControllerAudioElement.controller = myAudioController.
• We add play and pause buttons that control the MediaController.

Synchronizing Multiple Audio Elements

This example demonstrates how to synchronize multiple audio elements using a single MediaController.

<audio id="audio1ControllerSync" src="https://www.w3schools.com/html/horse.ogg" controls></audio>
<audio id="audio2ControllerSync" src="https://www.w3schools.com/html/horse.ogg" controls></audio>
<br />
<button id="playButtonControllerSync">Play All</button>
<button id="pauseButtonControllerSync">Pause All</button>

<script>
  const audio1ControllerSyncElement = document.getElementById("audio1ControllerSync");
  const audio2ControllerSyncElement = document.getElementById("audio2ControllerSync");
  const playButtonControllerSync = document.getElementById("playButtonControllerSync");
  const pauseButtonControllerSync = document.getElementById("pauseButtonControllerSync");

  const mediaControllerControllerSync = new MediaController();
  audio1ControllerSyncElement.controller = mediaControllerControllerSync;
  audio2ControllerSyncElement.controller = mediaControllerControllerSync;

  playButtonControllerSync.addEventListener("click", function () {
    mediaControllerControllerSync.play();
  });

  pauseButtonControllerSync.addEventListener("click", function () {
    mediaControllerControllerSync.pause();
  });
</script>

In this example:

• We create two audio elements with the IDs audio1ControllerSync and audio2ControllerSync.
• We create a MediaController object.
• We associate the MediaController with both audio elements.
• Clicking the “Play All” button starts playback for both audio elements simultaneously.
• Clicking the “Pause All” button pauses both audio elements.

Custom Media Control Interface

This example creates a custom media control interface using the MediaController to manage playback.

<audio id="myAudioControllerCustom" src="https://www.w3schools.com/html/horse.ogg"></audio>
<br />
<button id="playButtonCustom">Play</button>
<button id="pauseButtonCustom">Pause</button>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1" />
<span id="volumeValue">1.0</span>

<script>
  const myAudioControllerCustomAudioElement = document.getElementById("myAudioControllerCustom");
  const playButtonCustom = document.getElementById("playButtonCustom");
  const pauseButtonCustom = document.getElementById("pauseButtonCustom");
  const volumeSlider = document.getElementById("volumeSlider");
  const volumeValue = document.getElementById("volumeValue");

  const myAudioControllerCustomMediaController = new MediaController();
  myAudioControllerCustomAudioElement.controller = myAudioControllerCustomMediaController;
  myAudioControllerCustomAudioElement.controls = true;

  playButtonCustom.addEventListener("click", function () {
    myAudioControllerCustomMediaController.play();
  });

  pauseButtonCustom.addEventListener("click", function () {
    myAudioControllerCustomMediaController.pause();
  });

  volumeSlider.addEventListener("input", function () {
    myAudioControllerCustomMediaController.volume = volumeSlider.value;
    volumeValue.textContent = volumeSlider.value;
  });
</script>

In this example:

• We create an audio element with the ID myAudioControllerCustom.
• We create a play button, a pause button, and a volume slider.
• We associate the MediaController with the audio element.
• The play and pause buttons control the playback state.
• The volume slider controls the volume of the audio element via the MediaController.

Displaying Media Information

This example retrieves and displays media information using the MediaController.

<audio id="myAudioControllerInfo" src="https://www.w3schools.com/html/horse.ogg"></audio>
<p>Duration: <span id="durationValueControllerInfo"></span> seconds</p>

<script>
  const myAudioControllerInfoAudioElement = document.getElementById("myAudioControllerInfo");
  const durationValueControllerInfo = document.getElementById("durationValueControllerInfo");

  const mediaControllerControllerInfo = new MediaController();
  myAudioControllerInfoAudioElement.controller = mediaControllerControllerInfo;
  myAudioControllerInfoAudioElement.controls = true;

  myAudioControllerInfoAudioElement.addEventListener("loadedmetadata", function () {
    durationValueControllerInfo.textContent = myAudioControllerInfoAudioElement.duration;
  });
</script>

In this example:

• We create an audio element with the ID myAudioControllerInfo.
• We create a MediaController and associate it with the audio element.
• We display the duration of the audio using the duration property of the audio element.
  The loadedmetadata event ensures that the duration is available before displaying it.

Browser Support

The MediaController and its associated controller property have limited browser support. As of current knowledge:

• Chrome: Supported
• Firefox: Not supported
• Safari: Not supported
• Edge: Supported

Given the limited support, it’s essential to use feature detection and consider polyfills or alternative approaches for broader compatibility. ⚠️

Tips and Notes

• Use the MediaController to synchronize playback across multiple media elements for a cohesive user experience.
• Implement custom media control interfaces to provide a unique and branded experience.
• Remember to handle the loadedmetadata event to ensure media information is available before displaying it.
• Be aware of the limited browser support for MediaController and consider alternatives for broader compatibility. 💡

Conclusion

The controller property of the HTML Audio element, when used with the MediaController, offers a powerful way to manage and synchronize media playback in web applications. While browser support is currently limited, understanding and utilizing this property can provide advanced control over media elements, enabling you to create more sophisticated and interactive web experiences.