HTML & CSS

リファレンス

HTML

オーディオ

audio要素

ページ内に音楽ファイルを埋め込みます。特別なプラグインを必要とせずに、BGMの自動再生を行ったり、「再生」「停止」など簡単なコントローラを表示して聴くことができるようになります。しかし、ブラウザによって扱うことのできるファイル形式に差があったり、コントローラの表示に違いが出るので注意が必要です。

サンプルコード

<audio controls>
	<source src="/audio/graycode.mp3" type="audio/mp3">
	<source src="/audio/graycode.ogg" type="audio/ogg">
	<source src="/audio/graycode.wav" type="audio/wav">
</audio>
  • カテゴリー

    フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、インタラクティブコンテンツ(controls属性を持つ場合)、パルパブルコンテンツ(controls属性を持つ場合)

  • コンテンツモデル

    src属性を持つ場合:0個以上のtrack要素。それ以降トランスペアレント。
    src属性を持他ない場合:0個以上のsource要素。それ以降、0個以上のtrack要素。さらにそれ以降はトランスペアレント。
    いずれの場合も、メディア系要素を子孫要素に持つことは不可。

  • 使用ケース

    埋め込みコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

src

読み込む音声ファイルのURLを指定します。

crossorigin

この属性は、読み込む音声ファイルをCORSを使用して取得するか、そうでないかを示します。CORSが有効な音声ファイルは、同じサイトから提供された画像のようにcanvas要素で再利用できます。

  • anonymous

    クロスオリジン要求は実行されますが、信用情報は送信されません。サーバがリソース提供元サイトに信用情報を付与しない場合、音声ファイルの使用は制限されます。

  • use-credentials

    クロスオリジン要求は実行され、信用情報も送信されます。信用情報の送信にはCookie、証明書、ベーシック認証が使用されます。しかし、サーバーがリソース提供元サイトに信用情報を付与しない場合、音声ファイルの使用は制限されます。

preload

動画ファイルの読み込みについて指定します。

  • none

    音声ファイルをバッファリングしません。閲覧者が音声ファイルの再生を必要としているかが分からず、サーバーのトラフィックを最小限にしたいときにこの値を指定します。この値を設定すると、音声ファイルの読み込みを積極的には行いません。

  • metadata

    音声ファイルのメタデータ(再生時間の長さなど)のみバッファリングします。

  • auto

    音声ファイル全体をバッファリングする旨をブラウザへ伝えます。初期値です。

autoplay

音声ファイル読み込み後、自動再生を行うかを指定します。論理属性です。

mediagroup

音声・動画ファイルのグループ名を指定します。1ページ内に同じグループ名を持つ要素がある場合、連続再生が可能です。

loop

音声のループ(エンドレス)再生を指定します。論理属性です。

muted

ミュート(消音)を初期設定にしたい場合に指定します。自動で再生開始される設定のとき、こちらの方が親切な場合があります。論理属性です。

controls

再生コントローラを表示する際に指定します。コントローラの内容はブラウザによって異なります。論理属性です。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。