# How to programmatically detect audio track changes on Web

This article describes how you can use the AudioTrack API to detect audio track changes. An audio track "change" is triggered by enabling (or disabling) an audio track.

Implementing this functionality is a common use-case for developers who want to build their own UI, and annotate the audio track that is currently active.

## Usage

The implementation of the Web SDK applies to all web-based platforms, including Tizen and webOS.

The Web SDK exposes the AudioTrack API through [`player.audioTracks`](https://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#audiotracks). This `audioTracks` property is a [`MediaTrackList`](https://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/interfaces/MediaTrackList) that inherits from the [`TrackList`](https://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/interfaces/TrackList). This `TrackList` dispatches the events from the [`TrackListEventMap`](https://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/interfaces/TrackListEventMap). This `TrackListEventMap` contains the [`change`](https://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/interfaces/TrackListEventMap#change) event, as well as the `addtrack` and `removetrack` event.

The code below allows you to detect audio track changes.

```js
player.audioTracks.addEventListener('change', function (event) {
  const track = event.track;
  console.log(track, track.label, track.language, track.enabled);
});
```

The properties of a media `track` (e.g. `enabled`, `language`) are described in [the `MediaTrack` API reference](https://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/interfaces/MediaTrack).

## Related articles

Are you reading this article because you are interested in audio tracks? Continue reading below.

* [How to programmatically detect audio tracks](https://optiview.dolby.com/docs/theoplayer/how-to-guides/web/media-tracks/detect-audio-tracks.md)
* [How to programmatically enable or disable audio tracks](https://optiview.dolby.com/docs/theoplayer/how-to-guides/web/media-tracks/enable-disable-audio-tracks.md)

Are you reading this article because you are implementing a custom UI? Then you will find the following articles interesting:

* [How to build a chromeless UI](https://optiview.dolby.com/docs/theoplayer/how-to-guides/web/ui/build-chromeless-ui.md)
* [How to detect video track quality changes](https://optiview.dolby.com/docs/theoplayer/how-to-guides/web/media-tracks/detect-video-track-quality-changes.md)
* [How to detect text track changes](https://optiview.dolby.com/docs/theoplayer/how-to-guides/web/text-tracks/detect-text-track-changes.md)