目次に戻る

audio要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • src→音声のリソースを示す妥当なURL
  • autoplayブーリアン属性。自動再生する場合に指定。
  • controlsブーリアン属性ブラウザ等によるデフォルトプレーヤーコントロールを表示させたい場合に指定。
  • crossorigin→値は下記のとおりで、も可。の場合は、anonymousと同等。デフォルトは、anonymous。別オリジン(→別ドメインなど)からの読み込みに対して、ユーザー認証情報の要否を指定する。
    • anonymousユーザー認証情報を求めない。
    • use-credentialsユーザー認証情報を求める。
  • loopブーリアン属性。ループ再生させたい場合に指定。
  • mutedブーリアン属性デフォルトでは音を鳴らさない場合に指定。
  • preload→値は下記のとおり。リソースを事前に読み込むか否かのヒントを示す。の場合は、autoと同等。デフォルトは、ユーザーエージェントによる。
    • noneメディアリソースが必ずしも再生されるとは限らない旨、又は不必要なトラフィックを避けたい旨を、ユーザーエージェントに示唆する。
    • metadata→事前に読み込むべきはメディアリソースメタデータだけである旨を、ユーザーエージェントに示唆する。
    • auto→閲覧者のニーズを優先してメディアリソースを事前に読み込んでおいてもよい旨を、ユーザーエージェントに示唆する。
  • itemprop属性がある場合は、src属性は必須。

W3C : HTML5.3:下記の属性が許容されていた。

  • disableRemotePlaybackブーリアン属性。リモートでの再生及びユーザーインターフェースの提示を許さない場合に指定。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、なし。
  • デフォルトrole以外では、applicationを指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • プレーヤーコントロールがある場合は、高さは一行分かつ幅は必要な分にて表示。
  • デフォルトプレイヤーコントロールは、再生、一時停止、任意の再生時点への移動、音量変更、track要素による字幕等の表示・非表示・変更、表示方式の変更(フルスクリーン表示、独立ウィンドウ表示など)の機能を含むべきである。とはされているものの、動画の再生ではないaudio要素においては、適用がない事項もあると思われる。
  • プレーヤーコントロールがない場合は、display:noneCSSを強制する。
  • 当該要素内容は、当該要素サポートしないブラウザにおいて、代替コンテンツとして表示される。
ユーザーエージェントに対する特記事項
  • autoplay属性を実装する義務はない。また、ユーザーによる設定がそれを要求している場合は、autoplay属性を無視することが推奨される。
  • preload属性を無視してもよい。
  • W3C : HTML5.3:人間には聞こえず機械にしか聞こえない音声をユーザーに無断で再生して音声指令によって操作される装置をユーザーに無断で操作するという悪用や、ウェブページ読上げソフトウェアによる音声出力であるかのように偽装して詐欺を働くといった悪用がありうるので、autoplay属性の機能を制限したり、再生する音声の範囲を制限したりすることが考えられるとされていた。
意味・用法

音声を表す。

メディアリソースは、src属性又はsource要素によって指定される。

アクセシビリティ関連

私見・補足

いきなり音を鳴らすのは望ましくないので、autoplay属性は指定せずに、controls属性をつけておく方がよい。

現在、視覚系ブラウザにおけるレンダリングでは、track要素に基づく字幕表示は想定されてないようである。実装も見当たらない。

表示確認

ソース1

  <audio src="./sample/audio.mp3" controls="controls">
    <track src="./sample/audio-track.vtt" kind="captions" srclang="ja" label="caption" default="default" />
    audio要素の代替コンテンツその1。
  </audio>
  
表示結果1

未対応ブラウザにおいては、代替コンテンツが表示される。

IE6表示のスクリーンショット(表示結果1)
IE6表示:代替コンテンツが表示されている

IE7からIE8も同様。

ソース2:音声ファイルが存在しない場合

  <audio src="./sample/nai.mp3" controls="controls" title="nai.mp3は存在しません。">
    <track src="./sample/audio-track.vtt" kind="captions" srclang="ja" label="caption" default="default" />
    audio要素の代替コンテンツその2。
  </audio>
  
表示結果2

対応してるブラウザにおいては、この場合も代替コンテンツは表示されず、機能しないプレーヤーコントロールが表示されるだけ(あるいは、何も表示されない)。