AudioTrackList: change event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Want more browser support for this feature? Tell us why.

See full compatibility
Learn more

The change event is fired when an audio track is enabled or disabled, for example by changing the track's enabled property.

This event is not cancelable and does not bubble.

Syntax

Use the event name in addEventListener():

addEventListener("change", (event) => { })

Alternatively, assign to the event handler property of the interface:

onchange = (event) => { }

Event type

A generic Event.

Examples

Using addEventListener():

const videoElement = document.querySelector("video");
videoElement.audioTracks.addEventListener("change", (event) => {
  console.log(`'${event.type}' event fired`);
});

// changing the value of `enabled` will trigger the `change` event
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.audioTracks[0];
  track.enabled = !track.enabled;
});

Using the onchange event handler property (but note that this replaces other event listeners added using onchange, if any):

const videoElement = document.querySelector("video");
videoElement.audioTracks.onchange = (event) => {
  console.log(`'${event.type}' event fired`);
};

// changing the value of `enabled` will trigger the `change` event
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.audioTracks[0];
  track.enabled = !track.enabled;
});