WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <audio>「音声・音楽の再生」

<audio> 「音声・音楽の再生」[読み方:オーディオ]

<audio>タグは、音声や音楽などの再生を行う場合に使用します。
2013年4月時点では、ブラウザにより使用できる音源(拡張子)が異なりますので注意が必要です。

HTML規格HTML4.01HTML5
使用可否×
<audio>は、HTML5で追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」(英語のサイトです)
広告

<audio> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ(cotrols属性指定有の時)
エンベディッドコンテンツを子要素にもてる場所・src属性指定有の時:<track>の後にトランスペアレント
・src属性指定無の時:<source><track>の後にトランスペアレント
※どちらも<audio>、<video>は不可
不可

<audio>の属性

【構文】
<audio controls autoplay loop muted preload="auto" ・・・>
<source src="音源">
<p>audioに対応していない場合のメッセージ</p>
</audio>
属性意味
値のサンプルなど
controls音再生のコントロールを表示
-
src="音源ファイル名"音声や音楽のファイル名
※一般的には「source」タグで指定する
「sample.ogg」
「sample.mp3」
拡張子:「.mp3」「.ogg」「m4a」
crossorigin="値"CORS(Cross-Origin Resource Sharing)で使用される属性。他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定
意味
anonymous認証不要
use-credentials認証が必要
preload="値"先読みの指定
意味
none先読みしない
metadataメタデータ(サイズや長さなど)のみ先読みする
auto音声や音楽を先読みする
autoplay自動再生の指定
-
mediagroup="グループ名"同一文書内の複数メディアを同期させる指定
同期させるメディアに同じグループ名を指定(2013年4月時点で詳細不明)
loop繰返し再生の指定
-
muted音を出さない指定
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<audio>のサンプル

audioのサンプル
<audio controls>
<source src="se_maoudamashii_onepoint03.mp3">
<source src="se_maoudamashii_onepoint04.ogg">
<p style="color: red">HTML5のaudioに対応していないブラウザのためサンプルは表示されません。</p>
</audio>
ブラウザによって表示が異なります。画面イメージを確認

音源は魔王魂様よりダウンロードし利用させていただいています。
ページTOP

留意事項

  • <audio>タグは、HTML5で追加されたタグのため、対応していないブラウザも多くあります。
    当面は、<div>タグなどで対応した方が良いかも知れません。
  • ブラウザにより対応している音源ファイルは異なります。
    通常は<source>で複数の音種類を指定することで、各種ブラウザに対応します。
    <source>を複数指定した場合、先頭が優先でブラウザに対応したファイルが選択されます。
    IE(Ver9~)ChromeFirefoxSafariOpera
    MP3,AACOgg,MP3,AACOggMP3,AACOgg
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン