HTML <audio>

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

構文

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

<audio></audio>

<AUDIO></AUDIO>

AMP

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

コンテンツモデル

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

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

0 個以上の track 要素
transparent

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

0個以上の source 要素
0個以上の track 要素
transparent

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

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

属性

以下に示す属性をaudio要素に指定できる。

autoplay

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

class

CSS のクラスを指定する。空白で区切って、複数のクラスを指定できる。

controls

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

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

crossorigin

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

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

id

HTML文書内で一意な識別子を指定する。

loop

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

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

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

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

muted

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

preload

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

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

src

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

style

CSS のプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

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

HTMLAudioElement
プロパティ	型	説明
src	string	src 属性
crossOrigin	string	crossorigin 属性
preload	string	preload 属性
autoplay	boolean	autoplay 属性
loop	boolean	loop 属性
muted	boolean	muted 属性
controls	boolean	controls 属性

参考文献

Web Hypertext Application Technology Working Group (2023) The audio element HTML Living Standard

track

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。

<track></track>

<TRACK></TRACK>

track 要素の終了タグは省略できる。

<track>

<TRACK>

XML 形式で終了タグを省略することもできる。

<track />

コンテンツモデル

なし。track 要素の開始タグと終了タグの間にテキストや要素を入れることはできない。

属性

以下に示す属性を track 要素に指定できる。

default: 他のテキストトラックがより適切でない場合、このトラックを有効にする。
kind: テキスト・トラックの種類を指定する。
label: ユーザに見えるラベルを指定する。
src: リソースのアドレスを指定する。
srclang: テキスト・トラックの言語を指定する。

JavaScrpt

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

HTMLTrackElement
プロパティ	型	説明
default	boolean	default 属性
kind	string	kind 属性
label	string	label 属性
src	string	src 属性
srclang	string	srclang 属性

参考文献

Web Hypertext Application Technology Working Group (2023) The audio element HTML Living Standard