---
title: '<audio>: 埋め込み音声要素'
slug: Web/HTML/Element/audio
tags:
  - HTML
  - HTML 埋め込みコンテンツ
  - HTML5
  - 'HTML:フローコンテンツ'
  - 'HTML:埋め込みコンテンツ'
  - 'HTML:対話型コンテンツ'
  - 'HTML:知覚可能コンテンツ'
  - 'HTML:記述コンテンツ'
  - Media
  - Reference
  - Web
  - ウェブ
  - マルチメディア
  - メディア
  - 要素
translation_of: Web/HTML/Element/audio
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML の <code>&lt;audio&gt;</code> 要素</strong>は、文書内に音声コンテンツを埋め込むために使用します。この要素は、1つまたは複数の音源を含むことができます。音源は <code>src</code> 属性または {{HTMLElement("source")}} 要素を使用して表し、ブラウザーがもっとも適切な音源を選択します。また、 {{domxref("MediaStream")}} を使用してストリーミングメディアを指し示すこともできます。</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<p>上記の例は、 <code>&lt;audio&gt;</code> 要素の単純な使用方法を示しています。 {{htmlelement("img")}} 要素と同様の方法で、埋め込みたいメディアへのパスを <code>src</code> 属性に設定します。他にも自動再生や繰り返しを行うかどうか、ブラウザーの既定のオーディオコントロールを表示したいかどうか、などの情報を指定する属性を含めることができます。</p>

<p>開始および終了タグ <code>&lt;audio&gt;&lt;/audio&gt;</code> の中のコンテンツは、この要素に対応してないブラウザーで代替として表示されます。</p>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>

<dl>
 <dt>{{htmlattrdef("autoplay")}}</dt>
 <dd>論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
 <div class="note"><strong>メモ</strong>: 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。<a href="/ja/docs/Web/Media/Autoplay_guide">自動再生ガイド</a>には autoplay の正しい使い方についての追加情報があります。</div>
 </dd>
 <dt>{{htmlattrdef("controls")}}</dt>
 <dd>この属性が指定された場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。</dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>この列挙型の属性は、関連する音声ファイルを取得する際に CORS を使用するかを示します。<a href="/ja/docs/CORS_Enabled_Image">CORS が有効なリソース</a> は、<em>汚染</em>されることなく {{HTMLElement("canvas")}} 要素で再利用できます。次の値が使用できます:
 <dl>
  <dt><code>anonymous</code></dt>
  <dd>資格情報を伴わずにオリジン間リクエストを実行します。すなわち、 Cookie や X.509 証明書がない <code>Origin:</code> HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバーが元のサイトに信用情報を付与しない場合 (<code>Access-Control-Allow-Origin:</code> HTTP ヘッダーの設定なし)、画像が<em>汚染</em>され、その使用も制限されます。</dd>
  <dt><code>use-credentials</code></dt>
  <dd>資格情報を伴ってオリジン間リクエストを実行します。すなわち、Cookie や X.509 証明書を伴う <code>Origin:</code> HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (<code>Access-Control-Allow-Credentials:</code> HTTP ヘッダーに関わらず)、画像が<em>汚染</em>され、その使用も制限されます。</dd>
 </dl>
 この属性が存在しない場合、リソースは CORS リクエストなしで (すなわち、 <code>Origin:</code> HTTP ヘッダーなしで) 取得され、 {{HTMLElement('canvas')}} 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに <strong>anonymous</strong> が指定されたものとして扱われます。追加の情報は <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a> を参照してください。</dd>
 <dt>{{htmlattrdef("currentTime")}}</dt>
 <dd>
 <p><code>currentTime</code> を読み取ると、倍精度浮動小数点値で、現在の音声の再生位置を秒単位で示す値を返します。音声のメタデータが利用できない場合—この場合はメディアの開始時刻や長さを知ることができなくなるので— <code>currentTime</code> は再生が始まる時刻を示したり、変更したりすることができます。そうでない場合は、 <code>currentTime</code> を設定すると現在の再生位置を指定された時刻に設定し、メディアが現在読み込まれていれば、その位置にシークします。</p>

 <p>音声がストリーミングである場合は、 {{Glossary("user agent", "ユーザーエージェント")}} はデータがメディアバッファーからあふれた場合に一部を受け取ることができません。他にも音声が0秒から始まらないメディアタイムラインを持っている場合もあり、 <code>currentTime</code> をそれより前の時刻に設定すると失敗します。例えば、音声のメディアタイムラインが12時間目に始まる場合、 <code>currentTime</code> を 3600 に設定すると、現在の再生位置をメディアの開始位置の前に設定しようとするので、失敗します。 {{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} メソッドは、メディアのタイムラインの参照フレームの開始点を特定するのに使用することができます。</p>
 </dd>
 <dt>{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</dt>
 <dd>論理属性で、有線 (HDMI, DVI, など) や無線技術 (Mirachast, Chromecast, DLNA, AirPlay, など) で接続された機器のリモート再生機能を無効にするために使用します。詳しくは<a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">この提案中の仕様書</a>をご覧ください。
 <p class="note">Safari では、代替として <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> を使用することができます。</p>
 </dd>
 <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt>
 <dd>倍精度浮動小数点値で、メディアのタイムライン上の音声の長さ (合計の長さ) を秒単位で示します。要素上にメディアがない場合や、メディアが有効でない場合は、返値は <code>NaN</code> になります。メディアの終わりが分からない場合 (長さの分からないライブストリーミング、ウェブラジオ、 <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> から来たメディアなど)、この値は <code>+Infinity</code> になります。</dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>論理型の属性です。指定された場合、音声プレイヤーは音声の末尾に達すると、自動的に先頭に戻ります。</dd>
 <dt>{{htmlattrdef("muted")}}</dt>
 <dd>論理型の属性で、音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は <code>false</code> です。</dd>
 <dt>{{htmlattrdef("preload")}}</dt>
 <dd>列挙型の属性で、ユーザーに取って最良の結果をもたらすと作者が考えていることのヒントをブラウザーに伝えるためのものです。以下の値のうちひとつを持つことができます。
 <ul>
  <li><code>none</code>: 音声を事前に読み込むべきではないことを示します。</li>
  <li><code>metadata</code>: 音声のメタデータ (例えば、長さ) を読み込みます。</li>
  <li><code>auto</code>: ユーザーが音声ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。</li>
  <li><em>空文字列</em>: これは <code>auto</code> 値と同義です。</li>
 </ul>

 <p>既定値はブラウザーによって異なります。仕様書では <code>metadata</code> にするよう助言しています。</p>

 <div class="note"><strong>使用上のメモ:</strong>

 <ul>
  <li><code>autoplay</code> 属性は <code>preload</code> より優先します。<code>autoplay</code> を指定すると、言うまでもなくブラウザーは音声を再生するためにダウンロードを始めなければなりません。</li>
  <li>仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>埋め込む音声コンテンツの URL を指定します。なお、この属性は <a href="/ja/docs/HTTP_access_control">HTTP access controls</a> に従います。この属性を省略し、audio 要素の子要素として配置した {{htmlelement("source")}} 要素とその src 属性を用いて指定することも可能であり、その場合、これを複数設置することで、異なるタイプの複数の代替コンテンツを配置することが可能となります。</dd>
</dl>

<h2 id="Events" name="Events">イベント</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">イベント名</th>
   <th scope="col">発生する時</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{Event("audioprocess")}}</td>
   <td>{{DOMxRef("ScriptProcessorNode")}} の入力バッファが処理可能になった。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td>
   <td>ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td>
   <td>ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。</td>
  </tr>
  <tr>
   <td>{{Event("complete")}}</td>
   <td>{{DOMxRef("OfflineAudioContext")}} のレンダリングが終了した。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td>
   <td><code>duration</code> 属性が更新された。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td>
   <td>メディアが空になった。例えば、このイベントはメディアがすでに読み込まれた (または部分的に読み込まれた) 状態で、再読み込みのために <a href="/ja/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> メソッドが呼び出された場合など。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td>
   <td>メディアの末尾に達したために再生が停止した。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td>
   <td>メディアの最初のフレームが読み込み終わった。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td>
   <td>メタデータを読み込んだ。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td>
   <td>再生が一時停止した。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td>
   <td>再生が始まった。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td>
   <td>データがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td>
   <td>再生レートが変更された。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td>
   <td><em>シーク</em>操作が完了した。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td>
   <td><em>シーク</em>操作が始まった。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td>
   <td>ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td>
   <td>メディアデータの読み込みが停止した。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td>
   <td><code>currentTime</code> 属性で示されている時刻が更新された。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td>
   <td>音量が変更された。</td>
  </tr>
  <tr>
   <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td>
   <td>一時的なデータの不足により、再生が停止した。</td>
  </tr>
 </tbody>
</table>

<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>

<p>ブラウザーはすべてが同じ<a href="/ja/docs/Web/Media/Formats/Containers">ファイル形式</a>および<a href="/ja/docs/Web/Media/Formats/Audio_codecs">音声形式</a>に対応しているわけではありません。内部に含められた {{htmlelement("source")}} 要素で複数のソースを提供することができ、ブラウザーは理解できる最初のものを使用します。</p>

<pre class="brush: html">&lt;audio controls&gt;
  &lt;source src="myAudio.mp3" type="audio/mpeg"&gt;
  &lt;source src="myAudio.ogg" type="audio/ogg"&gt;
  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is
     a &lt;a href="myAudio.mp4"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
&lt;/audio&gt;</pre>

<p>私たちは大量の綿密な<a href="/ja/docs/Web/Media/Formats">メディアファイル形式</a>と<a href="/ja/docs/Web/Media/Formats/Audio_codecs">その中で使用することができる音声コーデックのガイド</a>を提供しています。また、<a href="/ja/docs/Web/Media/Formats/Video_codecs">動画で対応しているコーデックのガイド</a>も利用することができます。</p>

<p>他の使用上のメモ:</p>

<ul>
 <li><code>controls</code> 属性を指定しない場合、音声プレイヤーはブラウザーの既定のコントロールを含めません。 JavaScript と {{domxref("HTMLMediaElement")}} API を使用して、独自のカスタムコントロールを作成することができます。</li>
 <li>音声コンテンツを詳細に制御できるように、 <code>HTMLMediaElement</code> はさまざまな<a href="/ja/docs/Web/Guide/Events/Media_events">イベント</a>を発行します。これは音声の読み込みプロセスを監視する方法も提供するので、エラーを監視したり、再生や捜査を始めることができるようになったことを検出したりすることができます。</li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> を使用すると、既存の音声ファイルのストリーミングではなく、 JavaScript コードから音声ストリームを直接生成および操作することもできます。</li>
 <li><code>&lt;audio&gt;</code> 要素は <code>&lt;video&gt;</code> 要素と同じような方法で字幕を持つことができません。 Ian Devlin による <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a> で、役立つ情報や作業があります。</li>
</ul>

<p>HTML の <code>&lt;audio&gt;</code> 要素の使用に関する良い情報源として、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">映像および音声コンテンツ</a>の初心者向けチュートリアルがあります。</p>

<h3 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h3>

<p><code>&lt;audio&gt;</code> 要素は既定では固有の視覚的な出力を持ちませんが、 <code>controls</code> 属性が指定されると、ブラウザーの標準のコントロールが表示されます。</p>

<p>既定のコントロールは {{cssxref("display")}} の値に既定で <code>inline</code> を持っており、テキストブロックなどの中に置いておきたい場合でない限り、配置やレイアウトを制御しやすくするために、値を <code>block</code> に設定することは、多くの場合は良い考えです。</p>

<p>既定のコントロールは、ブロックを単位としてて影響するプロパティでスタイル付けすることができるので、 {{cssxref("border")}} や {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 等を指定することができます。しかし、音声プレイヤー内の個別のコンポーネントはスタイル付けすることができず (例えば、ボタンの寸法やアイコンの変更、フォントの変更など)、またコントロールはブラウザーごとに異なります。</p>

<p>ブラウザー間で一貫したルック＆フィールを実現するには、カスタムコントロールを作成する必要があるでしょう。これは好きな方法でマークアップおよびスタイル付けをすることができ、 JavaScript と {{domxref("HTMLMediaElement")}} API を使用することで、これらの機能を結合することができます。</p>

<p><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">動画プレイヤーのスタイル付けの基本</a>は、便利なスタイル付けテクニックをいくつか紹介しています。これは <code>&lt;video&gt;</code> の文脈で書かれたものですが、多くは <code>&lt;audio&gt;</code> にも同様に適用されます。</p>

<h3 id="Detecting_track_addition_and_removal" name="Detecting_track_addition_and_removal">トラックの追加と削除の検出</h3>

<p>{{event("addtrack")}} および {{event("removetrack")}} イベントを用いると、 <code>&lt;audio&gt;</code> 要素でトラックが追加されたり削除されたりしたことを検出することができます。しかし、これらのイベントは <code>&lt;audio&gt;</code> 要素自身に直接送信されるわけではありません。代わりに、 <code>&lt;audio&gt;</code> の {{domxref("HTMLMediaElement")}} 内にある、要素に追加されたトラックの種類に対応するトラックリストオブジェクトに送信されます。</p>

<dl>
 <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
 <dd>メディア要素のオーディオトラックのすべてを含む {{domxref("AudioTrackList")}} です。 <code>addtrack</code> のリスナーをこのオブジェクトに追加すると、新しいオーディオトラックが要素に追加された時に通知を受け取ることができます。</dd>
 <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt>
 <dd>この {{domxref("VideoTrackList")}} オブジェクトに <code>addtrack</code> リスナーを追加することで、要素に動画トラックが追加されたときに通知を受け取ることができます。</dd>
 <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt>
 <dd>この {{domxref("TextTrackList")}} オブジェクトに <code>addtrack</code> リスナーを追加することで、要素にテキストトラックが追加されたときに通知を受け取るkとができます。</dd>
</dl>

<div class="note">
<p><strong>メモ:</strong> <code>&lt;audio&gt;</code> 要素であっても、動画やテキストトラックリストを持っており、インターフェイスの実装の使用が奇妙に見えますが、実際に動画を表示するために使用することができます。</p>
</div>

<p>例えば、次のようなコードで <code>&lt;audio&gt;</code> 要素で音声トラックが追加されたり削除されたりしたときを検出することができます。</p>

<pre class="brush: js">var elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = function(event) {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = function(event) {
  trackEditor.removeTrack(event.track);
};
</pre>

<p>このコードは音声トラックが要素で追加および削除されることを監視し、トラックエディターの論理関数を呼び出すことで、エディターにおける利用できるトラックの一覧でトラックを登録や削除を行います。</p>

<p>{{event("addtrack")}} および {{event("removetrack")}} イベントを監視するには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用することもできます。</p>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Basic_usage" name="Basic_usage">基本的な使用法</h3>

<p>以下の例は <code>&lt;audio&gt;</code> 要素で OGG ファイルを再生する単純な例を示しています。ページで許可されていれば、 <code>autoplay</code> 属性によって自動再生され、代替コンテンツも含んでいます。</p>

<pre class="brush: html">&lt;!-- シンプルな音声再生 --&gt;
&lt;audio
  src="AudioTest.ogg"
  autoplay&gt;
  あなたのブラウザーは &lt;code&gt;audio&lt;/code&gt; 要素に対応していません。
&lt;/audio&gt;
</pre>

<p>いつ自動再生が動作するのか、自動再生を使用する許可の取得方法、いつどのように自動再生を使用するのが適切であるのかについては、<a href="/ja/docs/Web/Media/Autoplay_guide">自動再生ガイド</a>をご覧ください。</p>

<h3 id="&lt;audio>_element_with_&lt;source>_element" name="&lt;audio>_element_with_&lt;source>_element">&lt;source&gt; 要素を伴う &lt;audio&gt; 要素</h3>

<p>この例では、埋め込まれる音声トラックを、 <code>&lt;audio&gt;</code> 要素の直接の <code>src</code> 属性ではなく、内部の <code>&lt;source&gt;</code> 要素のものを使用して指定しています。これは <code>type</code> 属性の中でファイルの MIME タイプを含めることで、ブラウザーがそのファイルを再生できるかどうかを知ることができ、そのファイル再生できないときに時間を浪費しません。</p>

<pre class="brush: html">&lt;audio controls&gt;
  &lt;source src="foo.wav" type="audio/wav"&gt;
  あなたのブラウザーは &lt;code&gt;audio&lt;/code&gt; 要素に対応していません。
&lt;/audio&gt;
</pre>

<h3 id="&lt;audio>_with_multiple_&lt;source>_elements" name="&lt;audio>_with_multiple_&lt;source>_elements">複数の &lt;source&gt; 要素を持つ &lt;audio&gt;</h3>

<p>この例は複数の <code>&lt;source&gt;</code> 要素を含んでいます。ブラウザーは最初の source 要素 (Opus) を読み込もうとします。再生することができれば、2番目 (vorbis) と3番目 (mp3) の読み込みは行われません。</p>

<pre class="brush: html">&lt;audio controls&gt;
 &lt;source src="foo.opus" type="audio/ogg; codecs=opus"/&gt;
 &lt;source src="foo.ogg" type="audio/ogg; codecs=vorbis"/&gt;
 &lt;source src="foo.mp3" type="audio/mpeg"/&gt;
&lt;/audio&gt;</pre>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>

<p>台詞のある音声には、実際にコンテンツを説明する字幕と<ruby>文字化情報<rp> (</rp><rt>transcript</rt><rp>) </rp></ruby>を提供するべきです。 <a href="/ja/docs/Web/API/WebVTT_API">WebVTT</a> を使用して字幕を指定すると、聴力を失った人が、音声の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、録音されたコンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で録音の内容を確認できるようになります。</p>

<p>自動字幕サービスが使用されている場合は、生成されたコンテンツが元の音声を正しく表現しているかを確認することが重要です。</p>

<p><code>&lt;audio&gt;</code> 要素は直接 WebVTT に対応していません。機能を提供するライブラリまたはフレームワークを探すか、字幕を表示するコードを自分自身で書くかする必要があります。一つの選択肢として、 {{HTMLElement("video")}} 要素が WebVTT に対応しているので、これで音声を再生するというものもあります。</p>

<p>字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。例えば、以下の WebVTT では、角括弧を使用して口調や感情を閲覧者に示しています。これによって音楽、物音、効果音などの雰囲気を確立するのに役立ちます。</p>

<pre>1
00:00:00 --&gt; 00:00:45
[エネルギチックなテクノ音楽]

2
00:00:46 --&gt; 00:00:51
タイムキーパーのポッドキャストのようこそ！このエピソードでは、私たちはどちらのスイス時計が腕時計かを議論します？

16
00:00:52 --&gt; 00:01:02
[笑い] ごめん！言いたかったのは、どの腕時計がスイスの腕時計か？です。
</pre>

<p>また、 <code>&lt;audio&gt;</code> 要素に対応していないブラウザーを使用している閲覧者向けのフォールバックとしていくらかのコンテンツ (直接ダウンロードするリンクなど) を提供するのは良い習慣です。</p>

<pre class="brush: html">&lt;audio controls&gt;
  &lt;source src="myAudio.mp3" type="audio/mpeg"&gt;
  &lt;source src="myAudio.ogg" type="audio/ogg"&gt;
  &lt;p&gt;
    Your browser doesn't support HTML5 audio.
    Here is a &lt;a href="myAudio.mp4"&gt;link to download the audio&lt;/a&gt; instead.
  &lt;/p&gt;
&lt;/audio&gt;

</pre>

<ul>
 <li><a href="/ja/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN 字幕とクローズドキャプション - プラグイン</a></li>
 <li><a href="/ja/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
 <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN WCAG を理解する ― ガイドライン 1.2 の解説</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Summary" name="Summary">技術的概要</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>。 {{htmlattrxref("controls", "audio")}} 属性を持つ場合は、<a href="/ja/docs/HTML/Content_categories#Intractive_content">対話型コンテンツ</a>と<a href="/ja/docs/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td>要素が {{htmlattrxref("src", "audio")}} 属性を持つ場合: 0個以上の {{HTMLElement("track")}} 要素とそれに続く、メディア要素を含まない透過的コンテンツ。すなわち {{HTMLElement("audio")}} 要素や {{HTMLElement("video")}} を子要素として配置してはなりません。<br>
    その他の場合: 0個以上の {{HTMLElement("source")}} 要素、0個以上の {{HTMLElement("track")}} 要素、メディア要素を含まない透過的コンテンツ。すなわち {{HTMLElement("audio")}} 要素や {{HTMLElement("video")}} を子要素として配置してはなりません。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td>埋め込みコンテンツを受け入れるすべての要素。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>{{ARIARole("application")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLAudioElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-audio-element', '&lt;audio&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-audio-element', '&lt;audio&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.audio")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/Media">ウェブメディア技術</a>

  <ul>
   <li><a href="/ja/docs/Web/Media/Formats/Containers">メディアコンテナー形式 (ファイル形式)</a></li>
   <li><a href="/ja/docs/Web/Media/Formats/Audio_codecs">ウェブで使用される音声コーデックのガイド</a></li>
  </ul>
 </li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
 <li>{{domxref("HTMLAudioElement")}}</li>
 <li>{{htmlelement("source")}}</li>
 <li>{{htmlelement("video")}}</li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">学習エリア: 動画及び音声のコンテンツ</a></li>
 <li><a href="/ja/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">ブラウザーに依存しない音声の基本</a></li>
</ul>