Web/Media を更新

- 2021/10/20 時点の英語版に同期

1 files changed, 50 insertions, 69 deletions

diff --git a/files/ja/web/media/index.md b/files/ja/web/media/index.md
index 0a98ae2308..119844c9e8 100644
--- a/files/ja/web/media/index.md
+++ b/files/ja/web/media/index.md
@@ -1,5 +1,5 @@
 ---
-title: Web メディア技術
+title: ウェブメディア技術
 slug: Web/Media
 tags:
   - Audio
@@ -9,83 +9,64 @@ tags:
   - Web
 translation_of: Web/Media
 ---
-<p>{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}</p>
+{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}
 
-<p><span class="seoSummary">長年に渡り、オーディオ、ビデオおよび、その他のメディアを表示、作成および、管理するためのWeb の能力は、ますます速く成長してきました。今日では、HTML 要素、DOM インターフェイスおよび、これらのタスクを実行できる機能だけでなく、他のテクノロジーと並行しメディアを使用して本当に驚くべきことを可能にする、多数の API が使用可能です。この記事は、あなたがそれらを習得するために役立つであろう参考資料へのリンクを含む様々な API を列挙しています。</span></p>
+長年に渡り、音声、動画、およびその他のメディアを表示、作成および、管理するためのウェブの能力は、ますます速度を上げて成長してきました。今日では数多くの API が利用可能であり、HTML 要素や DOM インターフェイスなどにより、これらの作業を行うだけでなく、メディアを他の技術と組み合わせて使用することで、本当に驚くべきことができるようになっています。この記事は、あなたがそれらを習得するために役立つであろう参考資料へのリンクを含む様々な API を列挙しています。
 
-<div class="row topicpage-table">
-<div class="section">
-<h2 class="Documentation" id="References" name="References">参考文献</h2>
+## 参考文献
 
-<h3 id="HTML" name="HTML">HTML</h3>
+### HTML
 
-<p>これらの記事は、メディア開発者向け HTML 機能について説明しています。</p>
+これらの記事は、メディア開発者向け HTML 機能について説明しています。
 
-<dl>
- <dt>{{HTMLElement("audio")}}</dt>
- <dd><code>&lt;audio&gt;</code> 要素は、Web のコンテキストでオーディオを再生するために使用されます。これらは、より複雑なメディアの宛先として非表示に、または、オーディオファイルのユーザー制御再生のための表示コントロールとともに、使用できます。JavaScript から {{domxref("HTMLAudioElement")}} オブジェクトとしてアクセスできます。</dd>
- <dt>{{HTMLElement("video")}}</dt>
- <dd><code>&lt;video&gt;</code> 要素は、Web コンテキストにおけるビデオコンテンツのエンドポイントです。単純にビデオファイルを提示するためにまたは、ストリーミングビデオコンテンツの宛先として使用することができます。<code>&lt;video&gt;</code> は、メディア API を他の HTML および、DOM 技術とリンクさせるための手段としても、使用できます。例えば、{{HTMLElement("canvas")}} (フレームの取得と操作) です。JavaScript から {{domxref("HTMLVideoElement")}} オブジェクトとしてアクセスできます。</dd>
- <dt>{{HTMLElement("track")}}</dt>
- <dd>HTML の<code>&lt;track&gt;</code> 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内に配置して、メディア再生時に使用する <a href="/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> 形式の字幕または、キャプショントラックへの参照を提供できます。JavaScript から {{domxref("HTMLTrackElement")}} オブジェクトとしてアクセスできます。</dd>
- <dt>{{HTMLElement("source")}}</dt>
- <dd>HTML の<code>&lt;source&gt;</code> 要素は、{{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内で使用して、表示するソースメディアを指定します。複数のソースを使用して、さまざまなフォーマット、サイズまたは、解像度により、メディアを提供できます。JavaScript から {{domxref("HTMLSourceElement")}} オブジェクトとしてアクセスできます。</dd>
-</dl>
+- {{HTMLElement("audio")}}
+  - : `<audio>` 要素は、ウェブのコンテキストで音声を再生するために使用されます。これは、より複雑なメディアの設置先として目立たないように使用することもでき、また、オーディオファイルの再生をユーザーが制御するための可視のコントロールとともに使用することができます。JavaScript からは、{{domxref("HTMLAudioElement")}} オブジェクトとしてアクセスできます。
+- {{HTMLElement("video")}}
+  - : `<video>` 要素は、ウェブのコンテキストにおける動画コンテンツのエンドポイントです。単純に動画ファイルを表示するため、また、ストリーミング動画コンテンツの宛先として使用することができます。`<video>` は、メディア API を他の HTML および、DOM 技術とリンクさせるための手段としても、使用できます。例えば、{{HTMLElement("canvas")}} (フレームの取得と操作) です。JavaScript から {{domxref("HTMLVideoElement")}} オブジェクトとしてアクセスできます。
+- {{HTMLElement("track")}}
+  - : HTML の `<track>` 要素は {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内に配置して、メディア再生時に使用する [WebVTT](/ja/docs/Web/API/WebVTT_API) 形式の字幕または、キャプショントラックへの参照を提供することができます。JavaScript から {{domxref("HTMLTrackElement")}} オブジェクトとしてアクセスできます。
+- {{HTMLElement("source")}}
+  - : HTML の `<source>` 要素は、{{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内で使用して、表示するソースメディアを指定します。さまざまな形式、大きさ、解像度による複数のソースを使用してメディアを提供することができます。JavaScript から {{domxref("HTMLSourceElement")}} オブジェクトとしてアクセスできます。
 
-<h3 id="APIs" name="APIs">APIs</h3>
+### API
 
-<dl>
- <dt><a href="/ja/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
- <dd>Media Capabilities API を使用すると、アプリやサイトが実行されているデバイスのエンコーディングとデコーディングの能力を判断できます。これにより、どのフォーマットをいつ使用するかをリアルタイムで判断することができます。</dd>
- <dt><a href="/ja/docs/Web/API/Media_Streams_API">メディアキャプチャと Streams API</a></dt>
- <dd>ローカルおよび、ネットワークを介したメディアのストリーミング、記録および、操作を可能にする API のリファレンスです。これには、ビデオ、オーディオおよび、静止画をキャプチャするためのローカルカメラとマイクの使用が含まれます。</dd>
- <dt><a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream レコーディング API</a></dt>
- <dd>MediaStream Recording API を使用すると、メディアストリームをキャプチャしてデータ処理または、フィルターリングを行ったり、ディスクに記録したりすることができます。</dd>
- <dt><a href="/ja/docs/Web/API/Web_Audio_API">Web オーディオ API</a></dt>
- <dd>Web オーディオ API を使用すると、サウンドデータをリアルタイムおよび、録音済み素材の両方で生成、フィルターリングおよび、操作してからそのオーディオを <code>&lt;audio&gt;</code> 要素、メディアストリームまたは、ディスクなどへ送信できます。</dd>
- <dt><a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a></dt>
- <dd>WebRTC ( Web Real-Time Communication、Web リアルタイム通信) を使用すると、直接インターネット上の 2 ピア間で、ライブオーディオとビデオをストリーミングしたり、任意のデータを転送したりできます。</dd>
-</dl>
-</div>
+- [Media Capabilities API](/ja/docs/Web/API/Media_Capabilities_API)
+  - : Media Capabilities API を使用すると、アプリやサイトが実行されているデバイスのエンコーディングとデコーディングの能力を判断できます。これにより、どのフォーマットをいつ使用するかをリアルタイムで判断することができます。
+- [メディアキャプチャと Streams API](/ja/docs/Web/API/Media_Streams_API)
+  - : ローカルおよび、ネットワークを介したメディアのストリーミング、記録、操作を可能にする API のリファレンスです。これには、ビデオ、オーディオおよび、静止画をキャプチャするためのローカルカメラとマイクの使用が含まれます。
+- [Media Session API](/en-US/docs/Web/API/Media_Session_API)
+  - : Media Session API は、メディア通知をカスタマイズする方法を提供します。Media Session API は、ウェブアプリが再生しているメディアのユーザーエージェントが表示するためのメタデータを提供します。また、キーボード、ヘッドセット、リモコンなどにあるハードウェアキーや、モバイル機器の通知領域やロック画面にあるソフトウェアキーなどのプラットフォームメディアキーにアクセスするためのアクションハンドラーも提供しています。
+- [MediaStream Recording API](/ja/docs/Web/API/MediaStream_Recording_API)
+  - : MediaStream Recording API を使用すると、メディアストリームをキャプチャしてデータ処理または、フィルターリングを行ったり、ディスクに記録したりすることができます。
+- [Web Audio API](/ja/docs/Web/API/Web_Audio_API)
+  - : Web Audio API を使用すると、サウンドデータをリアルタイムおよび、録音済み素材の両方で生成、フィルターリングおよび、操作してからそのオーディオを `<audio>` 要素、メディアストリームまたは、ディスクなどへ送信できます。
+- [WebRTC](/ja/docs/Web/API/WebRTC_API)
+  - : WebRTC (Web Real-Time Communication、ウェブリアルタイム通信) を使用すると、直接インターネット上の 2 つのピア間で、ライブオーディオとビデオをストリーミングしたり、任意のデータを転送したりできます。
 
-<div class="section">
-<h2 class="Documentation" id="Guides" name="Guides">ガイド</h2>
+## ガイド
 
-<dl>
- <dt><a href="/ja/docs/Web/Media/Overview">Web 上のメディア技術の概要</a></dt>
- <dd>オーディオとビデオの自動再生、操作、および録音をサポートするオープンWeb テクノロジーと API の概要です。どの API を使用すべきかわからない場合は、ここから始めることをお勧めします。</dd>
- <dt><a href="/ja/docs/Web/Media/HTML_media">Using audio and video in HTML</a></dt>
- <dd>HTML の <code>&lt;audio&gt;</code> 要素と <code>&lt;video&gt;</code> 要素の使い方のガイドです。</dd>
- <dt><a href="/ja/docs/Web/Media/Accessibility">Web デザインにおけるメディアのアクセシビリティガイド</a></dt>
- <dd>このガイドでは、Web デザイナーと開発者が、さまざまな能力を持つ人々に対して、アクセスできるコンテンツを作成する方法について説明しています。これは単に、{{HTMLElement("image")}} 要素の {{htmlattrxref("alt", "img")}} 属性を使用することから、スクリーンリーダー用のメディアにタグを付けることまでの範囲に及びます。</dd>
- <dt><a href="/ja/docs/Web/Media/Formats">Web 上のメディアタイプとフォーマットのガイド</a></dt>
- <dd>Web 上の画像、音声および、ビデオメディアに使用できる、ファイルタイプとコーデックのガイドです。これには、どの種類のコンテンツにどの形式を使用するのかということ、フォールバックの提供方法や、メディアタイプの優先順位付けなどのベストプラクティスおよび、各メディアコンテナとコーデックの一般的なブラウザーサポート情報が含まれます。</dd>
- <dt><a href="/ja/docs/Web/Media/Streaming">Streaming audio and video</a></dt>
- <dd>オーディオとビデオのストリーミング方法、そしてストリームの最高の品質とパフォーマンスを確保するために活用できる技術と技術を網羅したガイドです。</dd>
- <dt><a href="/ja/docs/Web/Media/Autoplay_guide">メディアおよび Web オーディオ API の自動再生ガイド</a></dt>
- <dd>メディアやオーディオの予期しない自動再生は、ユーザーにとってはうれしくない驚きです。自動再生はある目的を果たす一方で、慎重に使用する必要があります。ユーザーがこれを制御できるようにするために、現在多くのブラウザーで自動再生ブロック機能が提供されています。この記事は自動再生の手引きとして、いつ、どのように使用するのかそして、ブラウザーを使って自動再生ブロックを適切に処理する方法についてのヒントを提供します。</dd>
- <dt><a href="/ja/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt>
- <dd>スクリーンにレンダリングされた 3D シーンやヘッドセットを使用して体験するミックスリアリティ体験などの 3D 環境では、オーディオがソースの方向から来ているように聞こえるように実行することが重要です。このガイドでは、これを達成する方法を説明します。</dd>
- <dt><a href="/ja/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt>
- <dd>このガイドでは、ビデオを 3D シーンに再生する方法を検討します。このテクニックは、フラットなコンピュータ画面上に表示される標準的な <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> アプリケーションでも、<a href="/ja/docs/Web/API/WebXR_Device_API">WebXR</a> で生成された仮想環境や拡張現実環境でも使用できます。</dd>
-</dl>
+- [HTML での音声と動画の使用](/ja/docs/Web/Media/HTML_media)
+  - : HTML の `<audio>` 要素と `<video>` 要素の使い方のガイドです。
+- [アクセシビリティのあるマルチメディア](/ja/docs/Learn/Accessibility/Multimedia)
+  - : このガイドでは、ウェブデザイナーと開発者が、さまざまな能力を持つ人々に対して、アクセスできるコンテンツを作成する方法について説明しています。これは単に、{{HTMLElement("img")}} 要素の {{htmlattrxref("alt", "img")}} 属性を使用することから、スクリーンリーダー用のメディアにタグを付けることまでの範囲に及びます。
+- [ウェブ上のメディア種別と形式のガイド](/ja/docs/Web/Media/Formats)
+  - : ウェブ上の画像、音声および、動画メディアに使用できる、ファイルタイプとコーデックのガイドです。これには、どの種類のコンテンツにどの形式を使用するのかということ、フォールバックの提供方法や、メディアタイプの優先順位付けなどのベストプラクティスおよび、各メディアコンテナーとコーデックの一般的なブラウザー対応情報が含まれます。
+- [音声と動画のストリーミングガイド](/ja/docs/Web/Media/Streaming)
+  - : 音声と動画のストリーミング方法、そしてストリームの最高の品質とパフォーマンスを確保するために活用できる技術と技術を網羅したガイドです。
+- [メディアおよび Web Audio API の自動再生ガイド](/ja/docs/Web/Media/Autoplay_guide)
+  - : メディアや音声の予期しない自動再生は、ユーザーにとってはうれしくない驚きです。自動再生はある目的を果たす一方で、慎重に使用する必要があります。ユーザーがこれを制御できるようにするために、現在多くのブラウザーで自動再生ブロック機能が提供されています。この記事は自動再生の手引きとして、いつ、どのように使用するのかそして、ブラウザーを使って自動再生ブロックを適切に処理する方法についてのヒントを提供します。
+- [ウェブ音声の空間演出の基本](/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics)
+  - : 画面に描画された 3D シーンや、ヘッドセットを使用して体験する複合現実感などの 3D 環境では、音声が音源の方向から聞こえてくるように演奏することが重要です。このガイドでは、その方法について説明します。
 
-<dl>
-</dl>
+## その他
 
-<h2 id="Other_topics" name="Other_topics">その他</h2>
+面白い方法でメディア API と並行して使用できるような、興味深いトピックもあります。
 
-<p>面白い方法でメディア API と並行して使用できるような、興味深いトピックもあります。</p>
-
-<dl>
- <dt><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></dt>
- <dd>Canvas API を使用すると、{{HTMLElement("canvas")}} に描画して、画像の内容を操作したり変更したりできます。これは、<code>&lt;canvas&gt;</code> 要素をビデオの再生先または、カメラのキャプチャ先として設定して、ビデオフレームをキャプチャして操作できるようにするなど、さまざまな方法によるメディア使用を可能にします。</dd>
- <dt><a href="/ja/docs/Web/API/WebGL_API">WebGL</a></dt>
- <dd>WebGL は、既存の Canvas API 上に OpenGL ES 互換の API を提供し、Web 上で強力な 3D グラフィックスを実行することを可能にします。キャンバスを通して、これはメディアコンテンツに 3D画像を追加するように使用できます。</dd>
- <dt><a href="/ja/docs/Web/API/WebXR_API">WebXR</a></dt>
- <dd>WebXR は最終的に、WebVR に代わるもので、バーチャルリアリティ (VR) と拡張現実 (AR) コンテンツの作成をサポートする技術です。複合現実的なコンテンツはその後、デバイスの画面に表示されるか、ゴーグルやヘッドセットを使用して表示されます。</dd>
- <dt><a href="/ja/docs/Web/API/WebVR_API">WebVR</a> {{deprecated_inline}}</dt>
- <dd>Web Virtual Reality API は、Oculus Rift や HTC Vive などのバーチャルリアリティ (VR) デバイスをサポートしているため、開発者はユーザーの位置や動きを 3D シーン内の動きに変換して、デバイスに表示することができます。WebVR は順次、WebXR に置き換えられることが望まれています。WebXR はより広範囲なユースケースをカバーします。</dd>
-</dl>
-</div>
-</div>
+- [Canvas API](/ja/docs/Web/API/Canvas_API)
+  - : Canvas API を使用すると、{{HTMLElement("canvas")}} に描画して、画像の内容を操作したり変更したりできます。これは、`<canvas>` 要素を動画の再生先または、カメラのキャプチャ先として設定して、ビデオフレームをキャプチャして操作できるようにするなど、さまざまな方法によるメディア使用を可能にします。
+- [WebGL](/ja/docs/Web/API/WebGL_API)
+  - : WebGL は、既存の Canvas API 上に OpenGL ES 互換の API を提供し、ウェブ上で強力な 3D グラフィックスを実行することを可能にします。キャンバスを通して、これはメディアコンテンツに 3D画像を追加するように使用できます。
+- [WebXR](/ja/docs/Web/API/WebXR_API)
+  - : WebXR は最終的に、WebVR に代わるもので、バーチャルリアリティ (VR) と拡張現実 (AR) コンテンツの作成をサポートする技術です。複合現実的なコンテンツはその後、デバイスの画面に表示されるか、ゴーグルやヘッドセットを使用して表示されます。
+- [WebVR](/ja/docs/Web/API/WebVR_API) {{deprecated_inline}}
+  - : Web Virtual Reality API は、Oculus Rift や HTC Vive などのバーチャルリアリティ (VR) デバイスをサポートしているため、開発者はユーザーの位置や動きを 3D シーン内の動きに変換して、デバイスに表示することができます。WebVR は順次、WebXR に置き換えられることが望まれています。WebXR はより広範囲なユースケースをカバーします。