Audio and video tracks | Frontend Practical Guide

Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`AudioTrack`	37	12	33	8	37	8
`enabled` AudioTrack の enabled プロパティは、記述された音声トラックが現在使用可能かどうかを指定します。 enabled を false に設定してトラックを無効にすると、トラックはミュートになり、音声は生成されません。	37	12	33	8	37	8
`id` id プロパティには、AudioTrack によって表されるトラックを一意に識別する文字列が含まれています。	37	12	33	8	37	8
`kind` kind プロパティは、文字列で AudioTrack に含まれる音声のカテゴリーを示します。	37	12	33	8	37	8
`label` AudioTrack の label プロパティは読み取り専用で、音声トラックの判読可能なラベルがあればそれを指定する文字列を返します。それ以外の場合は、空の文字列を返します。	37	12	33	8	37	8
`language` AudioTrack の language プロパティは読み取り専用で、音声トラックで使用されている言語を識別する文字列を返します。	37	12	33	8	37	8
`AudioTrackList` AudioTrackList インターフェイスは、所与の HTML メディア要素内に含まれる音声トラックのリストを表すために使用します。各トラックはリスト内の別々の AudioTrack オブジェクトで表します。	37	12	33	7	37	7
`addtrack_event` addtrack イベントは、トラックが AudioTrackList に追加されたときに発生します。	37	12	33	7	37	7
`change_event` change イベントは、音声トラックが有効または無効になったとき（トラックの enabled プロパティを変更したときなど）に発生します。	37	12	33	7	37	7
`getTrackById` AudioTrackList の getTrackById() メソッドは、指定された文字列と AudioTrack.id が一致するトラックリストから最初の AudioTrack オブジェクトを返します。 ID 文字列がわかっていれば、これで特定のトラックを見つけることができます。	37	12	33	7	37	7
`length` 読み取り専用の AudioTrackList の length プロパティは、AudioTrackList 内の項目数を返します。各項目は、メディア要素内の 1 つの音声トラックを表す AudioTrack です。値 0 は、メディアに音声トラックがないことを示します。	37	12	33	7	37	7
`removetrack_event` removetrack イベントは、トラックが AudioTrackList から取り除かれたときに発生します。	37	12	33	7	37	7
`audioTracks` audioTracks は HTMLMediaElement オブジェクトの読み取り専用プロパティで、メディア要素の音声トラックを表すすべての AudioTrack オブジェクトを列挙した AudioTrackList オブジェクトを返します。	37	12	33	7	37	7
`videoTracks` videoTracks は HTMLMediaElement オブジェクトの読み取り専用プロパティで、メディア要素の動画トラックを表すすべての VideoTrack オブジェクトを列挙した VideoTrackList オブジェクトを返します。	37	12	33	7	37	7
`VideoTrack` VideoTrack インターフェイスは、video 要素からの単一の映像トラックを表します。	37	12	33	7	37	7
`id` id プロパティは、VideoTrack によって表されるトラックを一意に識別する文字列を保持します。	37	12	33	7	37	7
`kind` kind プロパティは、VideoTrack に含まれる動画のカテゴリーを示す文字列を保持します。	37	12	33	7	37	7
`label` VideoTrack の label プロパティは読み取り専用で、映像トラックの判読可能なラベルがある場合はそれを指定する文字列を返します。それ以外の場合は、空の文字列を返します。	37	12	33	7	37	7
`language` VideoTrack の language プロパティは読み取り専用で、映像トラックで使用されている言語を識別する文字列を返します。	37	12	33	7	37	7
`selected` VideoTrack の selected プロパティは、特定の映像トラックがアクティブかどうかを制御します。	37	12	33	7	37	7
`VideoTrackList` VideoTrackList インターフェイスは、video 要素内に含まれる映像トラックのリストを表すために使用します。各トラックはリスト内の個別の VideoTrack オブジェクトで表します。	37	12	33	7	37	7
`addtrack_event` addtrack イベントは、トラックが VideoTrackList に追加されたときに発生します。	37	12	33	7	37	7
`change_event` change イベントは、映像トラックがアクティブまたは非アクティブになったとき（トラックの selected プロパティを変更したときなど）に発生します。	37	12	33	7	37	7
`getTrackById` VideoTrackList の getTrackById() メソッドは、指定された文字列と VideoTrack.id が一致するトラックリストから最初の VideoTrack オブジェクトを返します。	37	12	33	7	37	7
`length` 読み取り専用の VideoTrackList の length プロパティは、VideoTrackList 内の項目数を返します。各項目は、メディア要素内の 1 つの映像トラックを表す VideoTrack です。	37	12	33	7	37	7
`removetrack_event` removetrack イベントは、トラックが VideoTrackList から取り除かれたときに発生します。	37	12	33	7	37	7
`selectedIndex` 読み取り専用の VideoTrackList の selectedIndex プロパティは、現在選択されているトラックがある場合はその位置を返し、それ以外の場合は -1 を返します。	37	12	33	7	37	7

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const video = document.querySelector('video');
const audioTracks = video.audioTracks;
for (const track of audioTracks) {
  console.log(track.label, track.language);
}
audioTracks[1].enabled = true; // Enable the second audio track

ライブデモ

Track types

Compare audioTracks, videoTracks, and textTracks at a glance.

プレビュー全画面表示

Multitrack player use cases

Show the product scenarios where explicit track control matters.

プレビュー全画面表示

Accessibility note

Remember that track controls should expose meaningful labels and defaults.

プレビュー全画面表示

実務での使いどころ

Audio and video tracks の活用

AudioTrack インターフェイスは、 HTML のメディア要素（<audio> または <video>）のいずれかにある単一の音声トラックを表します。

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

対応ブラウザ

基本構文

ライブデモ

Track types

Multitrack player use cases

Accessibility note

実務での使いどころ

Audio and video tracks の活用

注意点

アクセシビリティ

参考リンク