audioの使い方についてまとめ

audioの概要

audioはオーディオファイル（音声データ）を再生するための要素です。

注意点

自動的に音声が再生されるサイトはユーザーにとってとても不快です。自動的に再生されないようにしましょう。

audioのカテゴリー

コンテンツカテゴリー

audioに入れられるタグ一覧

タグ早見表

src属性を持つ場合: 0個以上のtrack要素と、それに続くトランスペアレント要素(エンベッデッドコンテンツを子孫に持たない場合)。 src属性を持たない場合: 0個以上の source要素と、それに続く 0個以上の track要素と、それに続く トランスペアレント要素(エンベッデッドコンテンツを子孫に持たない場合)。

入れられるタグのカテゴリー・モデル

audioに使える属性

属性とは<audio> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード
グローバル属性一覧はこちら

audioで使うその他属性

src 概要 埋め込むコンテキストのパスを指定する属性です。
属性の値 埋め込むページのURL
crossorigin 概要 他のサイトのリソースにアクセスする際に、認証情報を使用するか否か定義できます。
属性の値 anonymous、use-credintials
preload 概要 ページ表示時にメディアリソースを事前にロードするか指定できます。
属性の値 auto、none、metadata
autoplay 概要 この属性を指定すると自動的に再生します。
属性の値 autoplay
loop 概要 ループ再生を指定できます。
属性の値 loop
muted 概要 音声をミュートできます。
属性の値 muted
controls 概要 指定するとコントローラを表示できます。
属性の値 controls

スポンサードサーチ

<audio>の使い方

ブラウザ対応状況

ブラウザの対応（PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応（SP)
Chrome あり
Safari あり
Samsung Internet あり