HTML Living Standard/audio

audio 要素

<audio> 要素は、ウェブページに音声コンテンツを埋め込むために使用されます。この要素は、音声を再生するためのインターフェースを提供し、異なる音声フォーマットに対応する複数の <source> 要素を内包することができます。音声ファイルの再生に関する操作を簡素化し、ストリーミングやダウンロード可能な形式を扱うことができます。

カテゴリ

フローコンテンツ
メタデータコンテンツ
複数メディア要素をサポートする要素

使用される文脈

メタデータコンテンツが期待される場所
フローコンテンツが期待される場所

コンテンツモデル

<audio> 要素は、以下の内容を含むことができます：

<source> 要素（オーディオソースの指定）
type 属性を使用して指定されたオーディオファイルの種類
<track> 要素（字幕やキャプションなどのメタデータ）

タグの省略

<audio> 要素は省略不可能なタグです。開始タグと終了タグを必ず記述する必要があります。

属性

<audio> 要素には以下の属性があります：

グローバル属性 — すべてのHTML要素に共通の属性（id, class, style など）。
controls — オーディオプレーヤーのコントロール（再生ボタン、音量調整、進捗バーなど）を表示します。これを設定することでユーザーがオーディオを制御できるようになります。
autoplay — ページの読み込み後、自動的にオーディオを再生します。
loop — オーディオが終了すると、最初から繰り返し再生されます。
muted — 初期状態で音声をミュートします。
preload — オーディオの読み込み方法を指定します。
- auto（自動的に読み込む）
- metadata（メタデータのみを読み込む）
- none（読み込まない）から選択します。
src — オーディオファイルのURLを指定します。
crossorigin — クロスオリジンリクエストを処理する方法を指定します。
integrity — サブリソース整合性チェックに使われるメタデータ。
referrerpolicy — 要素によって開始されたフェッチのリファラーポリシーを指定します。

使用例

基本的なオーディオの埋め込み

オーディオファイルを再生するための基本的なコードです。

<audio controls>
  <source src="audio/example.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

この例では、controls 属性を使用して、ユーザーに再生、停止、音量調整などのインタラクティブな操作を提供します。また、<source> 要素を使って音声ファイルの場所とフォーマット（この場合、MP3）を指定しています。

複数のオーディオソースの指定

異なるフォーマットをサポートする複数の <source> 要素を使うことで、ブラウザに最適なフォーマットを選択させることができます。

<audio controls>
  <source src="audio/example.ogg" type="audio/ogg">
  <source src="audio/example.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

ここでは、<audio> 要素内に2つの <source> 要素を指定しています。ブラウザは、対応するフォーマットを自動的に選択して再生します。

アクセシビリティの考慮事項

<audio> 要素に関連するアクセシビリティの考慮事項には、ユーザーが音声コンテンツを適切に操作できるように、コントロールが必要なことが含まれます。音声コンテンツには代替テキストやキャプションを提供することで、聴覚に障害のあるユーザーにもアクセス可能にすることが推奨されます。<track> 要素を使用して字幕やキャプションを提供することができます。

DOM インターフェース

<audio> 要素は、HTMLAudioElement インターフェースを通じて操作されます。このインターフェースは、オーディオ再生の制御に関連するプロパティやメソッドを提供します。

let audioElement = document.querySelector('audio');
audioElement.play(); // オーディオの再生
audioElement.pause(); // オーディオの一時停止

このインターフェースを使用して、プログラムからオーディオの再生や一時停止を制御することができます。