最終更新日：
公開日：
リファレンス
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属性を持つ場合）
-
コンテンツモデル
-
使用ケース
埋め込みコンテンツが期待される場所
属性
- グローバル属性
-
下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。 - src
-
読み込む音声ファイルのURLを指定します。
- crossorigin
-
この属性は、読み込む音声ファイルをCORSを使用して取得するか、そうでないかを示します。CORSが有効な音声ファイルは、同じサイトから提供された画像のようにcanvas要素で再利用できます。
-
anonymous
クロスオリジン要求は実行されますが、信用情報は送信されません。サーバがリソース提供元サイトに信用情報を付与しない場合、音声ファイルの使用は制限されます。
-
use-credentials
クロスオリジン要求は実行され、信用情報も送信されます。信用情報の送信にはCookie、証明書、ベーシック認証が使用されます。しかし、サーバーがリソース提供元サイトに信用情報を付与しない場合、音声ファイルの使用は制限されます。
-
- preload
-
動画ファイルの読み込みについて指定します。
-
none
音声ファイルをバッファリングしません。閲覧者が音声ファイルの再生を必要としているかが分からず、サーバーのトラフィックを最小限にしたいときにこの値を指定します。この値を設定すると、音声ファイルの読み込みを積極的には行いません。
-
metadata
音声ファイルのメタデータ（再生時間の長さなど）のみバッファリングします。
-
auto
音声ファイル全体をバッファリングする旨をブラウザへ伝えます。初期値です。
-
- autoplay
-
音声ファイル読み込み後、自動再生を行うかを指定します。論理属性です。
- mediagroup
-
音声・動画ファイルのグループ名を指定します。1ページ内に同じグループ名を持つ要素がある場合、連続再生が可能です。
- loop
-
音声のループ（エンドレス）再生を指定します。論理属性です。
- muted
-
ミュート（消音）を初期設定にしたい場合に指定します。自動で再生開始される設定のとき、こちらの方が親切な場合があります。論理属性です。
- controls
-
再生コントローラを表示する際に指定します。コントローラの内容はブラウザによって異なります。論理属性です。
こちらの記事は役に立ちましたか？
コメントありがとうございます！
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。