＜audio要素＞ - 音声

公開日: 2017/02/09

audio要素は、音声を再生するための要素です。

概要

名前

audio

カテゴリー

Flow content

Phrasing content

Embedded content

Interactive content: control属性を持つ場合のみ。

Palpable content: control属性を持つ場合のみ。

配置できる場所

Embedded contentが期待される場所。

コンテンツモデル

src属性がある場合、0個以上のtrack要素と、それに続くTransparent。

src属性がない場合、0個以上のsource要素と、それに続く0個以上のtrack要素と、それに続くTransparent。

video要素、またはaudio要素の祖先になってはいけない。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLMediaElement

デフォルトのスタイル

audio:not([controls]) {
	display: none;
}

audio {
	width: 300px;
	height: 32px;
}

仕様書

https://html.spec.whatwg.org/multipage/embedded-content.html#the-audio-element

属性

src

リソースのアドレス。

crossorigin

この属性を指定すると、リソースの取得がクロスオリジンモード(CORS)で行なわれる。その上で、クッキーなどの情報(クレデンシャル)を送信するか、しないかをキーワードで指定する。列挙属性で、無効な値を指定した場合は初期値が適用される。

anonymous: 送信しない。初期値。
use-credentials: 送信する。

preload

ユーザーが音声を再生する前の準備として、あらかじめリソースをどの程度読み込んでおくべきか、のヒントをキーワードで指定する。ユーザーエージェントがこれに従うとは限らない。

none: リソースを読み込まないでおくべき、というヒント。
metadata: メタデータだけを読み込んでおくべき、というヒント。
auto: 初期値。リソースを読み込んでおいていい、というヒント。

autoplay

この属性を付けると、ブラウザはページを開いた時点で、可能ならば自動的に再生を開始する。論理属性。

デモを見る

loop

この属性を付けると、ループ再生が有効になる。再生が終了しても停止せず、最初から再生し直す。論理属性。

デモを見る

muted

この属性を付けると、デフォルトでミュートになる。論理属性。

デモを見る

controls

この属性を付けると、コントローラーを表示する。音声の場合、一般的なブラウザではコントローラーがないと何も表示されない。論理属性。

デモを見る

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

src属性で指定

audio要素は2つの方法で音声ファイルのアドレスを指定できます。まずはsrc属性に指定する方法です。mp3形式のファイルを指定しておけば、一般的なブラウザの全てに対応できるでしょう。

HTML

<audio src="/audio/1.mp3" controls></audio>

デモを開く

source要素で指定

複数のフォーマットを用意している場合は、src属性ではなく、source要素を使って各音声ファイルのアドレスを指定します。ブラウザは先頭から順に調査して、再生できるフォーマットが見つかった時点でその音声ファイルの再生を開始します。そのため、指定する順番は重要です。下記の例では、ブラウザはoggフォーマットが再生できるなら.oggを、そうではなくmp3フォーマットが再生できるなら.mp3を、そうではなくwavフォーマットが再生できるなら.wavを再生、という順番に処理します。

HTML

<audio controls>
	<source src="/audio/1.ogg" type="audio/ogg">
	<source src="/audio/1.mp3" type="audio/mp3">
	<source src="/audio/1.wav" type="audio/wav">
</audio>

デモを開く

字幕の追加

音声ファイルと字幕を関連付けることができます。一般的なブラウザでは音声を再生する際に字幕が表示されることはありません。例えば、JavaScriptで後から操作をするために関連付ける、といった用途があります。なお、字幕ファイルの作成方法は、video要素で説明しています。

HTML

<!-- src属性の場合 -->
<audio src="/audio/1.mp3" controls></audio>
	<!-- track要素が先頭 -->
	<track kind="subtitles" src="./subtitles-ja.vtt" srclang="ja" label="日本語">
	<track kind="subtitles" src="./subtitles-en.vtt" srclang="en" label="English">
</video>

<!-- source要素の場合 -->
<audio controls>
	<!-- source要素が先頭 -->
	<source src="/audio/1.ogg" type="audio/ogg">
	<source src="/audio/1.mp3" type="audio/mp3">
	<source src="/audio/1.wav" type="audio/wav">

	<!-- source要素の直後に配置 -->
	<track kind="metadata" src="./subtitles-ja.vtt">
	<track kind="metadata" src="./subtitles-en.vtt">
</audio>

フォールバック

audio要素に非対応で音声プレーヤーを表示できないブラウザ向けに、代わりに表示するコンテンツを用意できます。audio要素の一番最後に、画像でもテキストでもどちらでもいいので配置しましょう。これはあくまでもaudio要素に対応していないブラウザ向けであり、音声ファイルのアドレスが間違っていて再生できないなどの場合に表示されるものではありません。

HTML

<!-- src属性の場合 -->
<audio src="/audio/1.mp3" controls></audio>
	<!-- 要素の最後にフォールバックコンテンツを配置 -->
	<p>お使いのブラウザでは音声再生に対応していません…。</p>
</video>

<!-- source要素の場合 -->
<audio controls>
	<!-- source要素が先頭 -->
	<source src="/audio/1.ogg" type="audio/ogg">
	<source src="/audio/1.mp3" type="audio/mp3">
	<source src="/audio/1.wav" type="audio/wav">

	<!-- 要素の最後にフォールバックコンテンツを配置 -->
	<p>お使いのブラウザでは音声再生に対応していません…。</p>
</audio>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜audio要素＞ - 音声</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/audio/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>audio要素は、音声を再生するための要素です。</p>

<h2>おはようございます</h2>
<audio src="/audio/1.mp3" controls></audio>

<h2>こんにちは</h2>
<audio src="/audio/2.mp3" controls></audio>

<h2>こんばんは</h2>
<audio src="/audio/3.mp3" controls></audio>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/638/"> <meta charset="utf-8"> <title>【デモ】＜audio要素＞ - 音声</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/audio/"> </head> <body>

<p>audio要素は、音声を再生するための要素です。</p> <h2>おはようございます</h2> <audio src="/audio/1.mp3" controls></audio> <h2>こんにちは</h2> <audio src="/audio/2.mp3" controls></audio> <h2>こんばんは</h2> <audio src="/audio/3.mp3" controls></audio>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>