HTML <audio>

<audio> は音声またはオーディオストリームを表すHTMLタグです。audio要素の使い方をご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。audio要素の終了タグは省略できない。

<audio></audio>

<AUDIO></AUDIO>

AMP

AMP (Accelerated Mobile Pages) では audio 要素を使えない。AMP の場合は audio 要素の代わりに amp-audio 要素を使う。

コンテンツモデル

audio要素の開始タグと終了タグの間には、以下に示す要素を含むことができる。

要素に src 属性がある場合:

1. 0 個以上の track 要素
2. transparent

要素に src 属性がない場合:

1. 0個以上の source 要素
2. 0個以上の track 要素
3. transparent

メディアのソースを子要素で指定する例を以下に示す。

<audio controls>
  <source src="/media/example.mp3">
</audio>

コンテンツ・モデル

なし

属性

すべての要素に共通するグローバル属性のほか、以下に示す属性を audio 要素に指定できる。

autoplay

ページ読み込み時にメディアリソースを自動的に再生するかどうかを boolean 型で指定する。

controls

ユーザーエージェントコントロールを表示するかどうかを boolean 型で指定する。

<audio controls src="/media/example.mp3"></audio>

crossorigin

クロスオリジンリクエストの処理方法を指定する。

crossorigin 属性

値	説明
anonymous	資格証明モードを same-origin に設定する
use-credentials	資格証明モードを include に設定する

loop

メディアリソースをループさせるかどうかを boolean 型で指定する。

loop 属性

値	説明
true	音声・音楽の再生が終わったら、再び初めから再生する。
false	音声・音楽の再生が終わったら停止する。

属性名だけ指定して属性値を省略すると、true を指定したことになる。

<audio src="/media/example.mp3" loop></audio>

muted

メディアリソースをデフォルトでミュートするかどうかを boolean 型で指定する。

preload

メディアリソースが必要とするバッファリング量の目安を指定する。

preload 属性

値	説明
none	なし
metadata	リソースのメタデータ
auto	自動

src

リソースのアドレスを指定する。

JavaScript

JavaScript から HTMLAudioElement インタフェースを通じて audio 要素へアクセスできる。

CSSセレクタ

<audio>要素のCSSセレクタを次に示す。

audio {
  /* properties */
}

参考文献

Web Hypertext Application Technology Working Group (2025) HTML Living Standard