HTML - audio 要素

概要

名前
audio
カテゴリー
  • Flow content
  • Phrasing content
  • Embedded content
  • Interactive content: control属性を持つ場合のみ。
  • Palpable content: control属性を持つ場合のみ。
配置できる場所
Embedded content が期待される場所。
コンテンツモデル
src 属性がある場合、0 個以上の track 要素と、それに続く Transparent。src 属性がない場合、0 個以上の source 要素と、それに続く 0 個以上の track 要素と、それに続く Transparent。video 要素、または audio 要素の祖先になってはいけない。
説明
audio 要素は、音声データを再生させる要素です。要素内容には audio 要素をサポートしていない古いブラウザ向けの内容 (音声ファイルへの直接リンクなど) を入れることができます。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLMediaElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
93.533.110.53
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
autoplay93.533.110.53
buffered4
controls93.533.110.53
loop91133.110.53
muted11
played111415499.14649
preload9433.1153
src93.533.110.53
volume
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
autoplay
論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザが明示的に有効化することを求める) にするべきです。ただし、ユーザの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。
controls
この属性が指定された場合、ブラウザは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。
crossorigin
この列挙型の属性は、関連画像を取得する際に CORS を使用するかを示します。CORS が有効なリソース は、汚染されることなく canvas 要素で再利用できます。次の値が使用できます:
anonymous
認証情報を伴わずにオリジン間要求を実行します。つまり、Cookie や X.509 証明書がない Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、画像が汚染され、その使用も制限されます。
use-credentials
認証情報を伴ってオリジン間要求を実行します。つまり、Cookie や X.509 証明書を伴う Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダーを送信せずに取得)、canvas 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。
loop
論理型の属性です。指定された場合、音声プレイヤーは音声の末尾に達すると、自動的に先頭に戻ります。
muted
論理型の属性で、音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false です。
preload
列挙型の属性で、ユーザに取って最良の結果をもたらすと作者が考えていることのヒントをブラウザに伝えるためのものです。以下の値のうちひとつを持つことができます。
  • none: 音声を事前に読み込むべきではないことを示します。
  • metadata: 音声のメタデータ (例えば、長さ) を読み込みます。
  • auto: ユーザが音声ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
  • (空文字列): これは auto 値と同義です。
autoplay 属性は preload より優先します。autoplay を指定すると、ブラウザは音声を再生するためにダウンロードを始めなければなりません。仕様書は、ブラウザがこの属性の値に従うことを強制していません。これは単なるヒントです。
src
埋め込む音声コンテンツの URL を指定します。なお、この属性は HTTP access controls に従います。この属性を省略し audio 要素の子要素として配置した source 要素とその src 属性を用いて指定することも可能であり、その場合、これを複数設置することで、異なるタイプの複数の代替コンテンツを配置することが可能となります。

サンプルコード

audio 要素のサンプルコードは以下のとおりです。

<audio src="https://example.com/audio.ogg" autoplay>
  あなたのブラウザは audio 要素をサポートしていません。
</audio>
audio 要素のサンプルコード

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
16
Shares:
0
Tag:
HTML