<audio> …… サウンドやオーディオを表す
広告
<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 …… メディアリソース全体をダウンロードすることも含めて、サーバーにリスクを与えることなくユーザーのニーズを最優先することをユーザーエージェントに示します。
（ユーザーエクスペリエンスを優先したい場合など）
- none …… バッファリングが開始された場合に、どの程度積極的にメディアリソースをダウンロードするかに関するヒントをユーザーエージェントに提供しません。
- autoplay属性
- ページ読み込み時にメディアリソースを自動再生してもよいというヒントをユーザーエージェントに示します。
autoplay属性とpreload属性を同時に指定すると、autoplay属性の指定が優先されます。 - loop属性
- メディアリソースをループするかどうかを指定します。
- muted属性
- デフォルトでメディアリソースをミュートするかどうかを指定します。
- controls属性
- ユーザーエージェントのコントロールを表示します。
■使用例
HTMLソース
<p>
<audio src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/videos/sample.mp4" controls>
<a href="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/videos/sample.mp4">音声ファイルをダウンロード</a>
</audio>
</p>↓↓↓
ブラウザ上の表示
video要素とaudio要素の違い
メディア要素には、video要素とaudio要素があります。
video要素とaudio要素の違いは、単純にビジュアルコンテンツの有無だけです。
video要素にはビデオやキャプションといったビジュアルコンテンツの再生領域があるのに対し、
audio要素にはありません。
video要素とaudio要素は、どちらもビデオとオーディオの両方に使用できます。
■関連項目
広告