audio
<audio> は音声・音楽を HTML 内に埋め込むことができます。
- 分類
- フローコンテンツ、フレージングコンテンツ、エンベデッドコンテンツ、インタラクティブコンテンツ（controls 属性がある場合）
- 内包できるもの
-
- src 属性がある時：0個以上のtrack要素、透過コンテンツ（audio, video 要素を除く）
- src 属性がない時：0個以上のsource要素、0個以上のtrack要素、透過コンテンツ（audio, video 要素を除く）
属性
- src=””
- ファイルの URL を指定
- preload=””
- ファイルの先読み
- autoplay
- 自動再生
- loop
- ループ再生
- muted
- 消音
- controls
- コントロールの表示
- crossorigin=””
- 別ドメイン上のリソースの扱い方法
autoplay ～ controls は論理属性であり、値を省略し <audio> タグ内に属性を指定するだけで自動再生を指定することができます。（XHTML5 の場合は値の省略不可）
ファイルの URL を指定
audio 要素に src 属性を指定すると任意の音声ファイルを読み込むことが出来ます。
<audio src="music.mp3"></audio>ファイルの先読み
preload 属性は先読みする情報を指定します。
- none
- 先読みしない
<audio src="music.mp3" preload="none"></audio> - metadata
- 音声のメタデータ（再生時間、容量等）を先読みする
<audio src="music.mp3" preload="metadata"></audio> - auto
- 全ての情報を先読みする
<audio src="music.mp3" preload="auto"></audio>
自動再生
autoplay 属性は音声の自動再生を指定します。ページ読み込み完了時自動的に再生されます。
<audio src="music.mp3" autoplay></audio>ループ再生
loop 属性は音声のループ再生を指定します。音声の再生完了後自動的に再生が繰り返されます。
<audio src="music.mp3" loop></audio>消音
loop 属性は音声のループ再生を指定します。音声の再生完了後自動的に再生が繰り返されます。
<audio src="music.mp3" muted></audio>コントロールの表示
controls 属性は再生・停止・ボリューム等、音声の操作ボタンを表示します。
<audio src="music.mp3" controls></audio>別ドメイン上のリソースの扱い方法
crossorigin 属性は別のドメインのリソースを利用する際のルールを指定します。オリジン間リソース共有または CORS （Cross-Origin Resource Sharing / クロスドメイン通信）と呼ばれる、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。
- anonymous
- 認証を使用しない
<audio src="music.mp3" crossorigin="anonymous"></audio> - user-credentials
- 認証を利用する
<audio src="music.mp3" crossorigin="user-credentials"></audio>