audio(オーディオ)要素は文書内に音声ファイルを埋め込みます。プラグインを必要とせず、ブラウザの基本機能のみで音声の再生を可能にします。

audio要素説明
カテゴリー・インタラクティブコンテンツ
・エンベッディッドコンテンツ
・パルパブルコンテンツ
・フレージングコンテンツ
・フローコンテンツ

*インタラクティブ・コンテンツとなるのはcontrols属性をもつ場合
*パルパブル・コンテンツとなるのはcontrols属性をもつ場合
コンテンツモデル*src属性をもつ場合は、0個以上のtrack要素に続きトランスペアレントコンテンツ

*src属性をもたない場合は、0個以上のsource要素、0個以上のtrack要素に続きトランスペアレントコンテンツ

ただし、上記どちらの場合でも子孫に他のaudio要素や、video要素を含んではいけない。
使用できる場所エンベッディッドコンテンツが期待される場所

audio要素で使用できる属性

属性名属性値説明
グローバルすべての要素で使用できる属性
src外部リソースのURI外部リソースの場所を指定する。
crossorigin・anonymous:Cookie やクライアントサイドの SSL 証明書、HTTP 認証などのユーザ認証情報は不要

・use-credentials:ユーザ認証情報を求めます
元文章とは異なるオリジンからデータを取得する際の認証に関する設定。
preload・none:音声や動画が必ず再生されるとは限らない、または不必要トラフィックを避けたいといった意思をブラウザに伝える。

・metadata:そのリソースのメタデータ(再生時間などの情報)だけは先に取得しておくことをブラウザに勧めます。

・auto:サーバのトラフィックなどは気にせず、閲覧者のニーズを優先してリソース全体をダウンロード開始してよいということをブラウザに伝えます。属性値が空の場合はこの扱いとなります。
音声、動画データのプリロード(バッファリング)に関する指示。
autoplay*論理属性(属性名だけで指定可能)ページが読み込まれたら自動的に再生を開始する。
loop*論理属性(属性名だけで指定可能)ループ再生をする(再生を繰り返す)。
muted*論理属性(属性名だけで指定可能)デフォルトで音量が0の状態にする。
controls*論理属性(属性名だけで指定可能)再生、停止ボタンなどを含むコントローラを表示させる。
*論理属性とは、属性名を指定するだけで属性値が可能になる属性のこと。

使用例

<audio src="/yume.mp3" controls>
 <p><a href="/yume.mp3">音声ファイルをダウンロード</a></p>
</audio>

表示

・音楽ファイル:夢

音楽素材は甘茶の音楽工房さんよりお借りしています。

カテゴリー: