TextTrack: cuechange event

{{APIRef("WebVTT")}} 

The cuechange event fires when a {{domxref("TextTrack")}}  has changed the currently displaying cues. The event is fired on both the TextTrack and the {{domxref("HTMLTrackElement")}}  in which it’s being presented, if any.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}} , or set an event handler property.

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

oncuechange = (event) => { }

Event type

A generic {{DOMxRef("Event")}}  with no added properties.

Examples

You can set up a listener for the cuechange event on a TextTrack using the {{domxref("EventTarget.addEventListener", "addEventListener()")}}  method:

track.addEventListener("cuechange", () => {
  const cues = track.activeCues; // array of current cues
  // …
});

Or you can set the oncuechange event handler property:

track.oncuechange = (event) => {
  let cues = track.activeCues; // array of current cues
};

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• {{glossary("WebVTT")}} 
• The same event on {{domxref("HTMLTrackElement")}} : {{domxref("HTMLTrackElement.cuechange_event", "cuechange")}}