audio要素で音声ファイルを埋め込む【HTML】

音声ファイルを埋め込むときはaudio要素を使います。

audio要素はプラグインを必要なわけではなく、ブラウザの基本機能で音声再生が可能になっています。

audio要素の内容に関しては、audio要素に対応していないブラウザ環境においての代替コンテンツになります。

audio要素で使える属性

audio要素で使える属性には以下のようなものがあります。

src（ソース）
crossorigin（クロス・オリジン）
preload（プレ・ロード）
autoplay（オート・プレイ）
mediagroup（メディア・グループ）
loop（ループ）
muted（ミューテッド）
controls（コントロールズ）

src（ソース）

imgタグで使うのと同様、src属性で埋め込む音声ファイルのURLを指定します。

crossorigin（クロス・オリジン）

crossorigin属性は、CORS（Cross-Origin Resource Sharing）という、異なるドメインの間で画像などを共有したりするクロスドメイン通信の設定をする属性です。

anonymousとuse-credentialsという値を指定することができ、値が空だったり正しくない場合はanonymousとして扱われます。

2つの値の違いは以下の通りです。

anonymous

CookieやクライアントサイドのSSL証明書、HTTP認証などのユーザー認証情報は不要

use-credentials

ユーザー認証情報が必要

preload（プレ・ロード）

preload属性で、再生する音声ファイルを事前に読み込むかどうか指定することができます。

ただし、ブラウザ環境によって挙動が左右されるので、指定した通りの挙動になるとは限らないのだとか。

また、autoplayという属性もあるのですが、そのautoplay属性も指定されている場合、preload属性の指定は無視されます。

preload属性で指定できる値は以下のようなものがあります。

none

noneを指定すると音声が必ず再生されるとは限らないし、不必要なトラフィックを避けたいということをブラウザに伝えることができます。

metadata

audio要素で読み込むリソースの再生時間などの情報（メタデータ）は先に取得しておくということをブラウザに勧めます。

auto

トラフィックなどは気にせずに、ユーザーのニーズを優先して、リソース全体をダウンロード開始していいということをブラウザに伝えることができます。

autoplay（オート・プレイ）

autoplay属性を指定していると、音声ファイルを読み込んだ際、自動的に再生されます。

先ほども言いましたが、autoplay属性を指定していると、preload属性の指定は無視されます。

ちなみにautoplay属性は値を必要としない論理属性です。

mediagroup（メディア・グループ）

音声や動画ファイルのグループ名を指定するのがmediagroup要素です。

mediagroup属性はvideo要素でも指定できるのですが、同じ文書内で同じmediagroup属性の値を持っていたら、それらのvideo要素やaudio要素はグループとして扱われるので、連続再生などができるようになります。

loop（ループ）

loop属性は音声ファイルがエンドレスで再生されるように指定します。

loop属性は値を必要としない論理属性です。

muted（ミューテッド）

muted属性を指定すると、音声ファイルはミュートした状態で再生されます。

muted属性は値を必要としない論理属性です。

controls（コントロールズ）

controls属性を指定することで、音声ファイルの再生をコントロールするためのインターフェースを表示させることができます。

controls属性は値を必要としない論理属性です。