audio 要素 (HTMLタグ)

音楽再生プレイヤー

2018年03月09日

HTMLのaudio要素の説明です。audio要素は、音声の再生プレイヤーを定義する要素です。


目次

  1. 要素の記述例
  2. 要素の説明
  3. 利用できる属性
  4. ブラウザデフォルトCSS設定

要素の記述例

audio要素の記述例
<audio src="audio/bgm.mp3" controls>
  <p><a href="audio/bgm.mp3">mp3データをダウンロード</a></p>
</audio>

閲覧中ブラウザーでの表示結果

 

要素の説明

  • audio要素は、音声の再生プレイヤーを定義する要素です。
  • audio要素の要素内容には、audio要素をサポートしていない古いブラウザ向けの内容(音声ファイルのダウンロードリンクなど)を入れることができます。

 

利用できる属性

属性名 属性の説明
autoplay プレイヤーを自動再生させるための属性です。
controls ブラウザのコントローラー(再生・停止・音量調整などのUI)を表示するための属性です。
crossorigin 現在のサーバとは異なるサーバからデータ取得する際の認証の設定(CORS設定)をする属性です。
loop メディアファイルを繰り返し再生させるための属性です。
muted ブラウザの設定に関わらず、プレイヤーをミュート(消音)状態にする属性です。
preload ブラウザ(ユーザーエージェント)に対してメディアデータのバッファリングがどの程度必要なのかを示すヒントをキーワードで定義する属性です。
src 対象ファイルのURLを定義する属性です。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

audio要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

 

ブラウザデフォルトCSS設定

Google Chromeの場合

audio要素のブラウザデフォルトCSS
audio {
  width: 300px;
  height: 32px;
}

 

 

 

Programming Style