<audio>要素
Technical Summary
audioは音声を主なmedia dataとして扱うembedded content要素で、共通のHTMLMediaElement処理モデルに参加します。resource selection、network / ready state、timeline、再生Promise、media eventはvideoと共有されます。
HTML Standard上、audioとvideoはどちらも音声・映像を含むmediaを扱えます。主な違いは、audioには映像や字幕などのvisual contentを表示するplayback areaがないことです。仕様上の処理、browser policy、codec対応、native controls、accessibility APIは別々のEvidenceとして扱います。
Definition / Categories
| 項目 | 定義 |
|---|---|
| 意味 | 主に音声dataを持つmedia resourceを文書内で再生する |
| Categories | Flow、Phrasing、Embedded content。controlsがあればInteractive contentとPalpable contentにも属する |
| Context | Embedded contentが期待される場所 |
| Content model | srcの有無でsource childの可否と順序が変わる。どちらも0個以上のtrackを許し、その後はtransparent content。子孫media elementは不可 |
| Tag omission | 開始タグ・終了タグとも省略不可 |
| Content attributes | Global attributes、src、crossorigin、preload、autoplay、loop、muted、controls、loading |
| DOM interface | HTMLAudioElement。HTMLMediaElementを継承 |
Content modelとresource selection
audioにsrc属性があるかどうかで、許される子要素が分かれます。子要素のsourceを使う形では、候補を文書順に置き、必要に応じてtypeでmedia typeを示します。
| 条件 | 子要素のモデル | 境界 |
|---|---|---|
srcあり | 0個以上のtrack、続いてtransparent content | source childは置かない |
srcなし | 0個以上のsource、0個以上のtrack、続いてtransparent content | transparent contentに子孫media elementは置けない |
<audio controls preload="metadata">
<source src="/media/lesson.ogg" type="audio/ogg; codecs=opus">
<source src="/media/lesson.mp3" type="audio/mpeg">
このブラウザーはaudio要素を扱えません。
<a href="/media/lesson.mp3">音声ファイルを開く</a>
</audio>
<p><a href="/transcripts/lesson.html">音声のテキスト版</a></p>sourceのtypeは取得前に候補を絞るための情報です。MIME typeの宣言だけではcontainer、codec、profile、server response、network条件で再生できるかは確定しません。picture内のsourceとmedia element内の選択処理も区別します。
audio内のtransparent contentは、audio elementを扱わないuser agent向けです。audio elementを扱うbrowserでresource取得やdecodeに失敗した際、同じ本文が必ずfallback表示されるわけではありません。再生できない場合のリンクやtranscriptはelementの外にも置きます。
属性とloading境界
| 属性 | 仕様上の役割 | 境界 |
|---|---|---|
src | media resourceのURL | 指定すると子sourceの候補選択modelは使わない |
crossorigin | media requestのCORS modeを指定 | resource側のresponse header、credentials条件と合わせて読む |
preload | none、metadata、autoによる取得量のauthor hint | browserがhintを尊重する保証ではない |
loading | viewport外のmedia resourceを遅延取得する方針 | lazy時はpreloadより遅延方針が優先。対応状況・実際の取得時期は実装観測が必要 |
autoplay | 自動再生を要求する | user agentは要求に従う義務がなく、利用者設定や再生policyの影響を受ける |
controls | user agentの再生UIを要求する | 表示・操作・accessibility tree上の細部はbrowserとplatformで異なり得る |
muted / loop | 初期のmuted state / 再生終了後に先頭へ戻す指定 | 現在のIDL stateや実際の再生許可と区別する |
type | 子sourceに置くmedia type hint | audio自身のcontent attributeではない |
Media stateと再生要求
audioはvideoと同じmedia processing modelを使います。各APIは異なる状態を示すため、一つの「読み込み率」としてまとめません。
| API / 概念 | 観測するもの | 境界 |
|---|---|---|
networkState | resource選択・取得の段階 | NETWORK_EMPTY、NETWORK_IDLE、NETWORK_LOADING、NETWORK_NO_SOURCE |
readyState | 現在位置のmedia dataの利用可能性 | HAVE_NOTHINGからHAVE_ENOUGH_DATA。値は飛び越して変化し得る |
currentTime / duration | media timelineの再生位置と長さ | 長さが不明・無限のresourceでは有限時間を前提にできない |
paused / ended | 再生処理の状態 | 操作UIの見た目だけから状態を推測しない |
play() | 再生要求と、その成立・拒否を表すPromise | user agentが再生を許可しない場合はNotAllowedErrorでrejectされ得る |
| Events | loadstart、loadedmetadata、canplay、playing、pause、endedなど | イベントは状態遷移に対応し、すべての順序やタイミングをアプリ側で固定できない |
source childのsrcやtypeを、挿入後に変えて現在の再生resourceを切り替える用途には使えません。再生先を明示的に変える場合は、media elementのsrcを更新してresource selectionを開始し、必要ならload()との関係も仕様と実装に分けて確認します。
Timed textとAccessibility
track childはmedia timelineに関連付く外部timed textを指定できます。audioのplayback areaにはcaptionなどを視覚表示する場所がないため、trackを置いただけで利用者に読めるtranscriptが提供されるとは限りません。章やmetadataなどtrackの目的、browserのUI、実際のalternativeを分けます。
HTML-AAM 1.0の2026-09-23 Working Draftはaudioのcomputed roleをhtml-audioとして記載し、controlsがある場合のnative UI部品をplatform APIへ公開する方法を定めています。これはWorking Draftの仕様mappingです。個々のbrowser Accessibility Tree、platform API、assistive technologyの出力を実測した結果とは別に扱います。
WCAG 2.2 SC 1.2.1は、テキストのmedia alternativeとして明確に表示されている場合を除き、事前収録audio-only mediaに等価なtime-based media alternativeを求めます。これはaudioタグがあるだけで適合・不適合が決まるという意味ではありません。録画済みの同期mediaに対するcaption基準など、別のcriterionと適用条件を区別します。
DOM Interface
| Interface / property | 役割 | 境界 |
|---|---|---|
HTMLAudioElement | HTMLMediaElementを継承し、audio要素を表す | resource selection・playback APIの多くは継承元に定義 |
Audio([src]) | audio elementを作るlegacy factory function | source指定時はresource selectionが始まり、preloadはautoに設定される。autoplay許可を意味しない |
volume / muted | playback volumeとmuted stateを読む・設定する | browser、platform、user preferenceによる制約を実装観測で確認 |
audioTracks | resourceに含まれるaudio trackの情報へアクセスする | 複数trackの存在や切替を全browserで使えるとは仮定しない |
Fact / Evidence
HTML Standard、HTML-AAM、WCAGの主張を、対象条件と根拠位置に結び付けています。AAMはWorking Draftであることを明記し、仕様上のmappingと実装観測を分けます。
| 種別 | Fact / 主張 | 条件・範囲 | 状態 | 根拠 |
|---|---|---|---|---|
| SPEC | audioはFlow、Phrasing、Embedded contentであり、controlsがあればInteractive・Palpable contentにも属する。 | Embedded contentが期待される場所で使用。DOM interfaceはHTMLAudioElement。 | 確認済み | HTML Standard: the audio element |
| SPEC | srcの有無でsource・track・transparent contentの順序が変わる。 | srcありではsource childを含まない。どちらも子孫media elementを除外する。 | 確認済み | HTML Standard: audio content model |
| SPEC | preloadは希望する取得量のhintであり、loading="lazy"時はloading deferralが優先する。 | 実際のfetch、viewport条件、autoplay、browser supportは別の実装条件。 | 確認済み | HTML Standard: media loading attributes |
| SPEC | media resource selection、network / ready state、playback promise、event処理は共通media modelで定義する。 | play()のPromise拒否とbrowser autoplay policy・resource decode errorを混同しない。 | 確認済み | HTML Standard: media elements |
| AAM | HTML-AAM 1.0 Working Draftはaudioのcomputed roleをhtml-audioとし、platformごとのroleとnative controls mappingを定義する。 | 2026-09-23 Working Draft。browser tree・platform API・assistive technologyでの実測とは別のEvidence。 | Draft確認済み | HTML-AAM: audio |
| SPEC | WCAG 2.2 SC 1.2.1は、条件に該当する事前収録audio-only mediaに等価なtime-based media alternativeを求める。 | テキストのmedia alternativeとして明確に表示された場合は例外。HTML element単体から適合性を判定しない。 | 確認済み | WCAG 2.2 SC 1.2.1 |
Evidence
- HTML Standard: The audio element — categories、content model、attributes、HTMLAudioElement
- HTML Standard: Media elements — resource selection、state、playback、events、loading、multiple tracks
- HTML Accessibility API Mappings 1.0: audio — computed role and platform mappings; Working Draft
- WCAG 2.2 SC 1.2.1 — prerecorded audio-only and video-only alternatives
- Web Platform Tests: the-audio-element and media-elements — test discovery entry points. Results for nine selected files appear in Implementation Evidence and are separate from full-directory coverage.
Implementation Evidence
仕様上の主張と、browser実装・WPT・Accessibility Treeの観測を分けて記録します。IMPL・WPT・AAMはChrome 154 / Windows 11 Pro build 26200で選定範囲を実測した部分観測です。
| 種別 | 再現確認の範囲 | 記録する条件 | 状態 |
|---|---|---|---|
| IMPL | sourceのMIME候補選択、networkState / readyState、metadata・data・canplay event、duration / currentTime、activation後のplay() Promise・playing・pause、loading IDL対応、native controls |
2026-09-26 / Chrome UA 154.0.0.0 / Windows 11 Pro build 26200。local audio-v1のmono PCM16 WAV（44.1 kHz・3秒）は未対応MIME候補をskipし、sample.wavをHTTP 206 audio/wav Range responseから選択。loadedmetadata → loadeddata → canplay、duration 3秒、networkState=1、readyState=4。button click時はuser activation=true、play() resolve・playing発火、volume=0 / muted=false、約500 ms後currentTime=0.286秒・再生中。未対応sourceのみではnetworkState=3、currentSrc空、error=null。 |
部分観測（Chrome 154 / 1環境） |
| WPT | the-audio-elementのconstructor・loadingと、共有media-elementsの初期state・src reflection・metadata / canplay eventから選定したWPT |
2026-09-26 / Chrome UA 154.0.0.0 / Windows 11 Pro build 26200 / wpt.live。audio固有4ファイルと共有media 5ファイルの合計9ファイルで28/28 assertions pass: audio-loading-eager.html (1/1), audio_constructor.html (11/11), audio-loading-lazy-in-viewport.html (1/1), audio-loading-load-preload-metadata-deferred.html (1/1), networkState_initial.html (2/2), readyState_initial.html (2/2), src_reflects_attribute_not_source_elements.html (2/2), event_loadedmetadata_noautoplay.html (4/4), event_canplay_noautoplay.html (4/4)。GitHub WPT masterの直下HTML testはそれぞれ20・71件。nested tests、残りのtest、他browserは未実施。実測時のテスト版は未記録です。リンク先の内容は変わることがあり、当時と同じテストで再確認できるとは限りません。 |
部分実行（28/28 pass） |
| AAM | Chrome Accessibility Tree snapshotでaria-label付きaudioのcontainer descriptionとnative play button、seek slider、その他のmedia操作を観測。HTML-AAMのcomputed roleは仕様上のmappingとして分離 |
2026-09-26 / Chrome UA 154.0.0.0 / Windows 11 Pro build 26200。snapshotはDescription「Atlas audio-v1 test tone」と、button「再生」、slider「オーディオ再生バー」等を表示。HTML-AAM 1.0 Working Draft（2026-09-23）のhtml-audio role mappingを確認。Windows platform APIと支援技術は未観測。 |
部分観測（Chrome AX Tree） |
IMPLはlocal PCM WAV fixture、WPTは表内に示した選定9ファイルで28/28 assertions pass、AAMはChrome Accessibility Tree snapshotの観測です。全WPT・他browser・Windows platform API・支援技術は未確認です。
Coverage / Open Issues
- 仕様確認済み意味、Categories、Context、
src別content model、共通media属性、DOM interface - 仕様確認済みresource selection、network / ready state、再生Promise、event modelの根拠位置
- 仕様確認済みHTML-AAM Working DraftとWCAG 2.2 SC 1.2.1の適用範囲
- 部分観測Chrome 154のfixtureでsource選択、media state・event、user activation後の再生、timelineを確認。codec・error全種・他browserは未確認
- 部分観測
wpt.liveの選定9ファイルで28/28 pass。両directoryの残りとnested testは未実施 - 部分観測 / 未確認Chrome Accessibility Treeでnative controlsを観測。Windows platform API、支援技術、transcript案内、CORS、複数audio track、他browserの比較は未実施
これらの部分観測はChrome 154 / Windows 11 Pro build 26200の条件に限られます。全browser・全codecの再生、全WPT、platform accessibility APIや支援技術による読み上げ、すべてのaudio contentのアクセシビリティを確認済みとは主張しません。
Related surface
初心者向けのaudio例、再生UI、source候補、transcriptの説明はYugienのaudio要素ページを参照してください。sourceの親要素別属性条件や候補選択はsource要素ページで確認できます。共通のmedia state・再生処理とvisual playback areaがあるvideoはvideo要素ページ、時間付きテキストの種別・属性・WebVTTはtrack要素ページ、画像resourceの選択はpictureも参照してください。