目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • src→音声のリソースを示す妥当なURL
  • autoplay→ブーリアン属性。自動再生する場合に指定。
  • controls→ブーリアン属性。ブラウザ等によるデフォルトのプレーヤーコントロールを表示させたい場合に指定。
  • crossorigin→値は下記のとおりで、空も可。空の場合は、anonymousと同等。デフォルトは、anonymous。別オリジン（→別ドメインなど）からの読み込みに対して、ユーザー認証情報の要否を指定する。
    • anonymous→ユーザー認証情報を求めない。
    • use-credentials→ユーザー認証情報を求める。
  • loop→ブーリアン属性。ループ再生させたい場合に指定。
  • muted→ブーリアン属性。デフォルトでは音を鳴らさない場合に指定。
  • preload→値は下記のとおり。リソースを事前に読み込むか否かのヒントを示す。空の場合は、autoと同等。デフォルトは、ユーザーエージェントによる。
    • none→メディアリソースが必ずしも再生されるとは限らない旨、又は不必要なトラフィックを避けたい旨を、ユーザーエージェントに示唆する。
    • metadata→事前に読み込むべきはメディアリソースのメタデータである（場合によっては、最初の少数のコマも含む）旨を、ユーザーエージェントに示唆する。
    • auto→閲覧者のニーズを優先してメディアリソースを事前に読み込んでおいてもよい旨を、ユーザーエージェントに示唆する。
  • itemprop属性がある場合は、src属性は必須。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、なし。
  • デフォルトrole以外では、applicationを指定可。
視覚系ブラウザにおいて期待されるレンダリング
  • プレーヤーコントロールがある場合は、高さは一行分かつ幅は必要な分にて表示。この場合は、置換要素となる。
  • デフォルトのプレイヤーコントロールは、再生、一時停止、任意の再生時点への移動、音量変更、track要素による字幕等の表示・非表示・変更、表示方式の変更（フルスクリーン表示、独立ウィンドウ表示など）の機能を含むべきである。とはされているものの、動画の再生ではないaudio要素においては、適用がない事項もあると思われる。
  • プレーヤーコントロールがない場合は、{display: none;}のCSSを強制する。
  • 当該要素の内容は、当該要素をサポートしないブラウザにおいて、代替コンテンツとして表示される。
ユーザーエージェントに対する特記事項
  • autoplay属性を実装する義務はない。また、ユーザーによる設定がそれを要求している場合は、autoplay属性を無視することが推奨される。
  • preload属性を無視してもよい。
意味・用法

音声を表す。

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

アクセシビリティ関連

私見・補足

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

有声動画のメディアリソースを動画なし音声として再生することも可能なブラウザもあるようである。

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

表示確認

ソース１

  <audio src="./sample/audio.mp3" controls="controls">
    <track src="./sample/audio-track.vtt" kind="captions" srclang="ja" label="caption" default="default" />
    audio要素の代替コンテンツその１。
  </audio>
表示結果１
ソース２：音声ファイルが存在しない場合

  <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要素の代替コンテンツその２。
  </audio>
表示結果２

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