initial commit

9 files changed, 776 insertions, 0 deletions

diff --git a/files/ja/web/api/audiotracklist/addtrack_event/index.html b/files/ja/web/api/audiotracklist/addtrack_event/index.html
new file mode 100644
index 0000000000..311fff9781
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/addtrack_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'AudioTrackList: addtrack イベント'
+slug: Web/API/AudioTrackList/addtrack_event
+tags:
+  - Audio​Track​List
+  - Event
+  - addTrack
+  - events
+translation_of: Web/API/AudioTrackList/addtrack_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>addtrack</code> イベントは、トラックが {{domxref("AudioTrackList")}} に追加されたときに発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("TrackEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/AudioTrackList/onaddtrack">onaddtrack</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>AddEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+
+videoElement.audioTracks.addEventListener('addtrack', (event) =&gt; {
+  console.log(`Audio track: ${event.track.label} added`);
+});</pre>
+
+<p><code>onaddtrack</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+
+videoElement.audioTracks.onaddtrack = (event) =&gt; {
+  console.log(`Audio track: ${event.track.label} added`);
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#event-media-addtrack', 'addtrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.AudioTrackList.addtrack_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: <code><a href="/ja/docs/Web/API/AudioTrackList/removetrack_event">removetrack</a></code>, <code><a href="/ja/docs/Web/API/AudioTrackList/change_event">change</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/VideoTrackList">VideoTrackList</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/VideoTrackList/addtrack_event">addtrack</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/MediaStream">MediaStream</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/MediaStream/addtrack_event">addtrack</a></code></li>
+ <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Streams API</a></li>
+ <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/ja/web/api/audiotracklist/change_event/index.html b/files/ja/web/api/audiotracklist/change_event/index.html
new file mode 100644
index 0000000000..3cf9a8bc5e
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/change_event/index.html
@@ -0,0 +1,98 @@
+---
+title: 'AudioTrackList: change イベント'
+slug: Web/API/AudioTrackList/change_event
+tags:
+  - API
+  - AudioTrackList
+  - Change
+  - Event
+  - HTML API
+translation_of: Web/API/AudioTrackList/change_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>change</code> イベントは、音声トラックが有効または無効になったとき（トラックの <code><a href="/ja/docs/Web/API/AudioTrack/enabled">enabled</a></code> プロパティを変更したときなど）に発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td>{{domxref("AudioTrackList/onchange", "onchange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>addEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js notranslate">const videoElement = document.querySelector('video');
+videoElement.audioTracks.addEventListener('change', (event) =&gt; {
+    console.log(`'${event.type}' イベント発生`);
+});
+
+// `enabled` の値を変更すると `change` イベントを引き起こします
+const toggleTrackButton = document.querySelector('.toggle-track');
+toggleTrackButton.addEventListener('click', () =&gt; {
+  const track = videoElement.audioTracks[0];
+  track.enabled = !track.enabled;
+});
+</pre>
+
+<p><code>onchange</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js notranslate">const videoElement = document.querySelector('video');
+videoElement.audioTracks.onchange = (event) =&gt; {
+    console.log(`'${event.type}' イベント発生`);
+};
+
+// `enabled` の値を変更すると `change` イベントを引き起こします
+const toggleTrackButton = document.querySelector('.toggle-track');
+toggleTrackButton.addEventListener('click', () =&gt; {
+  const track = videoElement.audioTracks[0];
+  track.enabled = !track.enabled;
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#event-media-change', 'change')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.AudioTrackList.change_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: <code><a href="/ja/docs/Web/API/AudioTrackList/addtrack_event">addtrack</a></code>, <code><a href="/ja/docs/Web/API/AudioTrackList/removetrack_event">removetrack</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/VideoTrackList">VideoTrackList</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/VideoTrackList/change_event">change</a></code></li>
+ <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Streams API</a></li>
+ <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/ja/web/api/audiotracklist/gettrackbyid/index.html b/files/ja/web/api/audiotracklist/gettrackbyid/index.html
new file mode 100644
index 0000000000..ec4f8e89f2
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/gettrackbyid/index.html
@@ -0,0 +1,80 @@
+---
+title: AudioTrackList.getTrackById()
+slug: Web/API/AudioTrackList/getTrackById
+tags:
+  - API
+  - Audio
+  - AudioTrackList
+  - HTML DOM
+  - Media
+  - Method
+  - Reference
+  - Track ID
+  - Track List
+  - Tracks
+  - getTrackById
+  - id
+  - track
+translation_of: Web/API/AudioTrackList/getTrackById
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("AudioTrackList")}}</strong> の <strong><code>getTrackById()</code></strong> メソッドは、指定された文字列と {{domxref("AudioTrack.id", "id")}} が一致するトラックリストから最初の {{domxref("AudioTrack")}} オブジェクトを返します。</span> ID 文字列がわかっていれば、これで特定のトラックを見つけることができます。</p>
+
+<h2 id="" name="">構文</h2>
+
+<pre class="syntaxbox">var <em>theTrack</em> = <em>AudioTrackList</em>.getTrackById(<em>id</em>);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>トラックリスト内で検索するトラックの ID を示す {{domxref("DOMString")}}。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>指定された文字列に一致する <code>id</code> を持つ <code>AudioTrackList</code> 内で見つかった最初のトラックを示す {{domxref("AudioTrack")}} オブジェクト。 一致が見つからない場合、このメソッドは <code>null</code> を返します。</p>
+
+<p>トラックは自然な順序で検索されます。 つまり、メディアリソース自体によって定義された順序で、またはリソースが順序を定義していない場合は、メディアリソースによってトラックが宣言される相対的な順序です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例は、映画をゲーム内のカットシーンまたは他の重要なセットのピースとして使用する架空のゲームを示唆しています。 各映画には、各キャラクターに1つの音声トラックがあり、音楽、効果音などにも1つの音声トラックがあります。 この関数により、ゲーム内の出来事に基づいて映画の演技を調整するために、ゲームは特定のキャラクターの音声を無効にすることができます。 キャラクターの対話が適切でない場合は、省略されます。 明らかにそれは作品を作るためにいくつかの巧妙なグラフィックデザインを必要とするでしょう、しかし...これは架空のゲームです。</p>
+
+<pre class="brush: js">function disableCharacter(videoElem, characterName) {
+  videoElem.audioTracks.getTrackById(characterName).enabled = false;
+}
+</pre>
+
+<p>この短い関数は、{{domxref("HTMLMediaElement.audioTracks")}} を使用して動画の音声トラックを含む {{domxref("AudioTrackList")}} を取得し、それから <code>getTrackById()</code> を呼び出してキャラクターの名前を指定します。 結果としてトラックの音声は、その {{domxref("AudioTrack.enabled", "enabled")}} フラグを <code>false</code> に設定することで無効になります。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-audiotracklist-gettrackbyid', 'AudioTrackList.getTrackById()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-getTrackById', 'AudioTrackList.getTrackById()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.AudioTrackList.getTrackById")}}</p>
diff --git a/files/ja/web/api/audiotracklist/index.html b/files/ja/web/api/audiotracklist/index.html
new file mode 100644
index 0000000000..097c783983
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/index.html
@@ -0,0 +1,120 @@
+---
+title: AudioTrackList
+slug: Web/API/AudioTrackList
+tags:
+  - API
+  - Audio
+  - AudioTrackList
+  - HTML DOM
+  - Interface
+  - Media
+  - Reference
+  - Track List
+  - Tracks
+  - list
+  - インターフェイス
+translation_of: Web/API/AudioTrackList
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>AudioTrackList</strong></code> インターフェイスは、所与の HTML メディア要素内に含まれる音声トラックのリストを表すために使用します。 各トラックはリスト内の別々の {{domxref("AudioTrack")}} オブジェクトで表します。</span></p>
+
+<p>{{domxref('HTMLMediaElement.audioTracks')}} を使用してこのオブジェクトのインスタンスを取得します。 個々のトラックは、配列構文を使用してアクセスできます。</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p><em>このインターフェイスは、その親インターフェイスである {{domxref("EventTarget")}} からもプロパティを継承します。</em></p>
+
+<dl>
+ <dt>{{domxref("AudioTrackList.length", "length")}} {{ReadOnlyInline}}</dt>
+ <dd>リスト内のトラック数</dd>
+</dl>
+
+<h2 id="Event_handlers" name="Event_handlers">イベントハンドラー</h2>
+
+<dl>
+ <dt>{{domxref("AudioTrackList.onaddtrack", "onaddtrack")}}</dt>
+ <dd>{{event("addtrack")}} イベントが発生したときに呼び出されるイベントハンドラー。 新しい音声トラックがメディア要素に追加されたことを示します。</dd>
+ <dt>{{domxref("AudioTrackList.onchange", "onchange")}}</dt>
+ <dd>{{event("change")}} イベントが発生したときに呼び出されるイベントハンドラー。 これは、1つ以上のトラックが {{domxref("AudioTrack.enabled", "enabled")}} フラグの変更により有効または無効になったときに発生します。</dd>
+ <dt>{{domxref("AudioTrackList.onremovetrack", "onremovetrack")}}</dt>
+ <dd>{{event("removetrack")}} イベントが発生したときに呼び出されるイベントハンドラー。 音声トラックがメディア要素から取り除かれたことを示します。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em>このインターフェイスは、その親インターフェイスである {{domxref("EventTarget")}} からもメソッドを継承しています。</em></p>
+
+<dl>
+ <dt>{{domxref("AudioTrackList.getTrackById", "getTrackById()")}}</dt>
+ <dd>指定された文字列と一致する {{domxref("AudioTrack.id", "id")}} を持つ <code>AudioTrackList</code> 内で見つかった {{domxref("AudioTrack")}} を返します。 一致が見つからない場合は、<code>null</code> を返します。</dd>
+</dl>
+
+<h2 id="Events" name="Events">イベント</h2>
+
+<dl>
+ <dt>{{domxref("AudioTrackList.addtrack_event", "addtrack")}}</dt>
+ <dd>新しい音声トラックがメディア要素に追加されたときに発生します。<br>
+ {{domxref("AudioTrackList.onaddtrack", "onaddtrack")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("AudioTrackList.change_event", "change")}}</dt>
+ <dd>トラックが有効または無効にされたときに発生します。<br>
+ {{domxref("AudioTrackList.onchange", "onchange")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("AudioTrackList.removetrack_event", "removetrack")}}</dt>
+ <dd>音声トラックがメディア要素から取り除かれたときに発生します。<br>
+ {{domxref("AudioTrackList.onremovetrack", "onremovetrack")}} プロパティからも利用できます。</dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p><code>AudioTrackList</code> を使用すると、メディア要素にある音声トラックに直接アクセスできるだけでなく、{{event("addtrack")}} イベントと {{event("removetrack")}} イベントにイベントハンドラを設定できるため、メディア要素のストリームにトラックが追加されたときまたは取り除かれたときに検出できます。 詳細と例については、{{domxref("AudioTrackList.onaddtrack", "onaddtrack")}} と {{domxref("AudioTrackList.onremovetrack", "onremovetrack")}} を参照してください。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Getting_a_media_elements_audio_track_list" name="Getting_a_media_element's_audio_track_list">メディア要素の音声トラックリストの取得</h3>
+
+<p>メディア要素の {{domxref("AudioTrackList")}} を取得するには、その {{domxref("HTMLMediaElement.audioTracks", "audioTracks")}} プロパティを使用します。</p>
+
+<pre class="brush: js">var audioTracks = document.querySelector("video").audioTracks;</pre>
+
+<h3 id="Monitoring_track_count_changes" name="Monitoring_track_count_changes">トラック数の変化の監視</h3>
+
+<p>この例では、利用可能なチャンネル数に関する情報を表示するアプリがあります。 それを最新に保つために、{{event("addtrack")}} イベントと {{event("removetrack")}} イベントのためのハンドラを設定しています。</p>
+
+<pre class="brush: js">audioTracks.onaddtrack = updateTrackCount;
+audioTracks.onremovetrack = updateTrackCount;
+
+function updateTrackCount(event) {
+  trackCount = audioTracks.length;
+  drawTrackCountIndicator(trackCount);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#audiotracklist', 'AudioTrackList')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#audiotracklist', 'AudioTrackList')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.AudioTrackList")}}</p>
diff --git a/files/ja/web/api/audiotracklist/length/index.html b/files/ja/web/api/audiotracklist/length/index.html
new file mode 100644
index 0000000000..5449a3978f
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/length/index.html
@@ -0,0 +1,72 @@
+---
+title: AudioTrackList.length
+slug: Web/API/AudioTrackList/length
+tags:
+  - API
+  - Audio
+  - AudioTrackList
+  - HTML DOM
+  - Media
+  - Property
+  - Read-only
+  - Reference
+  - length
+  - list
+  - track
+translation_of: Web/API/AudioTrackList/length
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">読み取り専用の <strong>{{domxref("AudioTrackList")}}</strong> の <strong><code>length</code></strong> プロパティは、<code>AudioTrackList</code> 内のエントリ数を返します。 各エントリは、メディア要素内の1つの音声トラックを表す {{domxref("AudioTrack")}} です。</span> 値 0 は、メディアに音声トラックがないことを示します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>trackCount</em> = <em>AudioTrackList</em>.length;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>AudioTrackList</code> に含まれる音声トラックの数を示す数値。 <code>AudioTrackList</code> を {{domxref("AudioTrack")}} 型のオブジェクトの配列として扱うことで、各トラックにアクセスできます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>このスニペットは、{{domxref("Document.querySelector", "querySelector()")}} によって {{Glossary("DOM")}} 内で見つかった最初の {{HTMLElement("video")}} 要素内の音声トラックの数を取得します。</p>
+
+<pre class="brush: js">var videoElem = document.querySelector("video");
+var numAudioTracks = 0;
+
+if (videoElem.audioTracks) {
+  numAudioTracks = videoElem.audioTracks.length;
+}
+</pre>
+
+<p>このサンプルは、{{domxref("AudioTrack")}} をサポートしていないブラウザーで失敗するのを避けるために、{{domxref("HTMLMediaElement.audioTracks")}} が定義されていることを確認していることに注意してください。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#dom-audiotracklist-length', 'AudioTrackList.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-length', 'AudioTrackList.length')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.AudioTrackList.length")}}</p>
diff --git a/files/ja/web/api/audiotracklist/onaddtrack/index.html b/files/ja/web/api/audiotracklist/onaddtrack/index.html
new file mode 100644
index 0000000000..b73d0deacf
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/onaddtrack/index.html
@@ -0,0 +1,81 @@
+---
+title: AudioTrackList.onaddtrack
+slug: Web/API/AudioTrackList/onaddtrack
+tags:
+  - API
+  - Adding Audio Tracks
+  - Adding Tracks
+  - Audio
+  - AudioTrackList
+  - Event Handler
+  - HTML DOM
+  - Media
+  - Property
+  - Reference
+  - addTrack
+  - onaddtrack
+  - track
+translation_of: Web/API/AudioTrackList/onaddtrack
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("AudioTrackList")}}</strong> の <strong><code>onaddtrack</code></strong> プロパティは、{{event("addtrack")}} イベントが発生したときに呼び出されるイベントハンドラで、<code>AudioTrackList</code> が表す音声トラックを持つメディア要素に新しい音声トラックが追加されたことを示します。</span></p>
+
+<p>イベントは {{domxref("TrackEvent")}} オブジェクトの形でイベントハンドラに渡され、その {{domxref("TrackEvent.track", "track")}} プロパティは新しく追加されたトラックを識別します。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、<code>addtrack</code> イベント用のハンドラを追加することもできます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>AudioTrackList</em>.onaddtrack = <em>eventHandler</em>;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>onaddtrack</code> は、 {{domxref("TrackEvent.track", "track")}} プロパティでどの音声トラックがメディアに追加されたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。</p>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>{{event("addtrack")}} イベントは、音声トラックを <code>AudioTrackList</code> オブジェクトで表すメディア要素に新しいトラックが追加されるたびに呼び出されます。 これは、メディアが最初に要素に添付されたときにトラックが要素に追加されたときに発生します。 メディアリソース内の音声トラックごとに1つの <code>addtrack</code> イベントが発生します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>このスニペットは、新しく追加されたトラックを表す {{domxref("AudioTrack")}} オブジェクトを渡して、<code>addToTrackList()</code> 関数を呼び出す {{event("addtrack")}} イベントのハンドラを確立します。 このシナリオでは、その関数の役割は、選択可能な音声トラックのリストに新しいトラックを追加することです。</p>
+
+<pre class="brush: js">document.querySelector("video").audioTracks.onaddtrack = function(event) {
+  addToTrackList(event.track);
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-tracklist-onaddtrack', 'AudioTrackList.onaddtrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onaddtrack', 'AudioTrackList.onaddtrack')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.AudioTrackList.onaddtrack")}}</p>
+
+<p> </p>
diff --git a/files/ja/web/api/audiotracklist/onchange/index.html b/files/ja/web/api/audiotracklist/onchange/index.html
new file mode 100644
index 0000000000..872f7e7f13
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/onchange/index.html
@@ -0,0 +1,81 @@
+---
+title: AudioTrackList.onchange
+slug: Web/API/AudioTrackList/onchange
+tags:
+  - API
+  - Adding Audio Tracks
+  - Adding Tracks
+  - Audio
+  - AudioTrackList
+  - Event Handler
+  - HTML DOM
+  - Media
+  - Property
+  - Reference
+  - addTrack
+  - onchange
+  - track
+translation_of: Web/API/AudioTrackList/onchange
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("AudioTrackList")}}</strong> の <strong><code>onchange</code></strong> プロパティは、{{event("change")}} イベントが発生したときに呼び出されるイベントハンドラで、<code>AudioTrackList</code> 内の1つ以上の {{domxref("AudioTrack")}} が有効または無効になっていることを示します。</span></p>
+
+<p>イベントは {{domxref("Event")}} オブジェクトの形でイベントハンドラに渡されます。 イベントは追加情報を提供しません。 メディアのトラックの新しい状態を判断するには、それらの {{domxref("AudioTrack.enabled")}} フラグを調べる必要があります。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、<code>change</code> イベントのハンドラを追加することもできます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>AudioTrackList</em>.onchange = <em>eventHandler</em>;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>onchange</code> は、メディア要素でトラックが有効または無効になったときに必ず呼び出される関数を設定します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>このスニペットは、リスト内の各トラックを調べる {{event("change")}} イベントのハンドラを確立し、トラックの現在の状態を示すユーザーインターフェイスコントロールの状態を更新する関数を呼び出します。</p>
+
+<pre class="brush: js">var trackList = document.querySelector("video").audioTracks;
+
+trackList.onchange = function(event) {
+  trackList.forEach(function(track) {
+    updateTrackEnabledButton(track.id, track.enabled);
+  });
+};
+</pre>
+
+<p>この例の <code>updateTrackEnabledButton()</code> は、トラックの {{domxref("AudioTrack.id", "id")}}（おそらくアプリはトラック ID をコントロール要素の ID として使用します）でユーザーインターフェイスコントロールを見つけて、トラックの {{domxref("AudioTrack.enabled", "enabled")}} フラグを使用してコントロールが現在どの状態にあるべきかを決定する関数です。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-tracklist-onchange', 'AudioTrackList.onchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onchange', 'AudioTrackList.onchange')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.AudioTrackList.onchange")}}</p>
diff --git a/files/ja/web/api/audiotracklist/onremovetrack/index.html b/files/ja/web/api/audiotracklist/onremovetrack/index.html
new file mode 100644
index 0000000000..3683570ebb
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/onremovetrack/index.html
@@ -0,0 +1,78 @@
+---
+title: AudioTrackList.onremovetrack
+slug: Web/API/AudioTrackList/onremovetrack
+tags:
+  - API
+  - Audio
+  - AudioTrackList
+  - Event Handler
+  - HTML DOM
+  - Media
+  - Property
+  - Reference
+  - Removing Audio Tracks
+  - Removing Tracks
+  - onremovetrack
+  - remove
+  - removeTrack
+  - track
+translation_of: Web/API/AudioTrackList/onremovetrack
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("AudioTrackList")}}</strong> の <strong><code>onremovetrack</code></strong> イベントハンドラは、{{event("removetrack")}} イベントが発生したときに呼び出され、音声トラックがメディア要素から、したがって <code>AudioTrackList</code> からも取り除かれたことを示します。</span></p>
+
+<p>イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡されます。 その {{domxref("TrackEvent.track", "track")}} プロパティは、メディア要素の <code>AudioTrackList</code> から取り除かれたトラックを識別します。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、<code>removetrack</code> イベント用のハンドラを追加することもできます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>AudioTrackList</em>.onremovetrack = <em>eventHandler</em>;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>onremovetrack</code> は、{{domxref("TrackEvent.track", "track")}} プロパティでどの音声トラックがメディア要素から取り除かれたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この単純な例は、トラックがメディア要素から取り除かれるたびに、メディア要素内の現在の音声トラック数を取得するだけです。</p>
+
+<pre class="brush: js">document.querySelector("my-video").audioTracks.onremovetrack = function(event) {
+  myTrackCount = document.querySelector("my-video").audioTracks.length;
+};
+</pre>
+
+<p>メディア要素に残っている現在の音声トラック数は、<code>AudioTrackList</code> の {{domxref("AudioTrackList.length", "length")}} プロパティから取得します。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-tracklist-onremovetrack', 'AudioTrackList.onremovetrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onremovetrack', 'AudioTrackList.onremovetrack')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.AudioTrackList.onremovetrack")}}</p>
diff --git a/files/ja/web/api/audiotracklist/removetrack_event/index.html b/files/ja/web/api/audiotracklist/removetrack_event/index.html
new file mode 100644
index 0000000000..ea6d7dcbc3
--- /dev/null
+++ b/files/ja/web/api/audiotracklist/removetrack_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'AudioTrackList: removetrack イベント'
+slug: Web/API/AudioTrackList/removetrack_event
+tags:
+  - AudioTrackList
+  - Event
+  - events
+  - removeTrack
+translation_of: Web/API/AudioTrackList/removetrack_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>removeTrack</code> イベントは、トラックが {{domxref("AudioTrackList")}} から取り除かれたときに発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("TrackEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/AudioTrackList/onremovetrack">onremovetrack</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>AddEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+
+videoElement.audioTracks.addEventListener('removetrack', (event) =&gt; {
+  console.log(`Audio track: ${event.track.label} removed`);
+});</pre>
+
+<p><code>onremovetrack</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+
+videoElement.audioTracks.onremovetrack = (event) =&gt; {
+  console.log(`Audio track: ${event.track.label} removed`);
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#event-media-removetrack', 'removetrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.AudioTrackList.removetrack_event")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>関連情報: <code><a href="/ja/docs/Web/API/AudioTrackList/addtrack_event">addtrack</a></code>, <code><a href="/ja/docs/Web/API/AudioTrackList/change_event">change</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/VideoTrackList">VideoTrackList</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/VideoTrackList/removetrack_event">removetrack</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/MediaStream">MediaStream</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/MediaStream/removetrack_event">removetrack</a></code></li>
+ <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Streams API</a></li>
+ <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>