トップページ  > HTML Living Standard  > <audio>

★HTML Living Standard リファレンス

<audio> …… サウンドやオーディオを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<audio>タグは、サウンドやオーディオを表す際に使用します。

サウンド(sound)とは物音・音声・音響などの耳で聞き取れる音全般で、 オーディオ(audio)とは録音された音やスピーカーなどの機器を通して再生される音です。

<audio>~</audio>のなかに記述するaudio要素の内容は、 audio要素をサポートしているブラウザでは表示されません。 audio要素の内容は、audio要素をサポートしていない旧いブラウザを対象としたものです。 例えば、旧いブラウザを利用しているユーザーに向けて、オーディオコンテンツへのアクセス方法を通知できます。

メディア要素に共通の属性

src属性、crossorigin属性、preload属性、autoplay属性、loop属性、muted属性、controls属性は、 メディア要素(video要素とaudio要素)に共通の属性です。

■属性

src属性
リソースのアドレスを指定します。
crossorigin属性
要素がクロスオリジンリクエストを処理する方法を指定します。
preload属性
メディアリソースに必要なバッファリング量のヒントをユーザーエージェントに示します。 preload属性の値に指定できるキーワードは以下の通りです。
  • none …… バッファリングが開始された場合に、どの程度積極的にメディアリソースをダウンロードするかに関するヒントをユーザーエージェントに提供しません。 (サーバー負荷の軽減を優先したい場合、ユーザーがメディアリソースを必要としない可能性が高い場合など)
  • metadata …… 一貫した再生を維持しながら可能な限り遅い速度でメディアデータを取得するようにダウンロードを調整することをユーザーエージェントに示します。 (サーバー負荷の軽減と最適なユーザーエクスペリエンスの妥協点)
  • auto …… メディアリソース全体をダウンロードすることも含めて、サーバーにリスクを与えることなくユーザーのニーズを最優先することをユーザーエージェントに示します。 (ユーザーエクスペリエンスを優先したい場合など)
autoplay属性
ページ読み込み時にメディアリソースを自動再生してもよいというヒントをユーザーエージェントに示します。 autoplay属性とpreload属性を同時に指定すると、autoplay属性の指定が優先されます。
loop属性
メディアリソースをループするかどうかを指定します。
muted属性
デフォルトでメディアリソースをミュートするかどうかを指定します。
controls属性
ユーザーエージェントのコントロールを表示します。

■使用例

HTMLソース

<p>
 <audio src="./sample/sample.mp4" controls>
  <a href="./sample/sample.mp4">音声ファイルをダウンロード</a>
 </audio>
</p>
↓↓↓

ブラウザ上の表示

video要素とaudio要素の違い

メディア要素には、video要素とaudio要素があります。

video要素とaudio要素の違いは、単純にビジュアルコンテンツの有無だけです。 video要素にはビデオやキャプションといったビジュアルコンテンツの再生領域があるのに対し、 audio要素にはありません。

video要素とaudio要素は、どちらもビデオとオーディオの両方に使用できます。

■関連項目

  • <video> …… ビデオを表す
  • <audio> …… サウンドやオーディオを表す
  • <track> …… メディア要素のテキストトラックを表す
  • <embed> …… 埋め込みリソースを表す
  • <object> …… 外部リソースを表す
  • <picture> …… 画像リソースの選択肢を提供する
  • <source> …… リソースの選択肢をセットする
  • <img> …… 画像を表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ