<audio>要素

<audio>要素の定義

英語で「音声」を表す、”audio”より。
HTML文書では、文書内に音声コンテンツを埋め込みたい場合に使用します。
音源となるファイルは、src属性か、<source> 要素を使って指定します。

子要素として使用できるもの

• src属性をもつ場合：0個以上の <track> 要素とそれに続くメディア要素を含まない透過的コンテンツ。
• その他の場合：0個以上の <source> 要素、0個以上の <track> 要素、メディア要素を含まない透過的コンテンツ。

いずれの場合も、<audio> 要素や <video> 要素を子孫要素に配置することは出来ません。

親要素として使えるもの

埋め込みコンテンツを許容するすべての要素。

許可されているARIAロール

application

DOMインターフェース

HTMLAudioElement

属性

グローバル属性が指定できます。

autoplay

論理属性で、指定された場合は音声ファイル全体のダウンロード完了を待たずに、再生可能になった段階でコンテンツの再生が始まります。

controls

論理属性で、この属性が指定された場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。

crossorigin

関連する音声の取得の際に、CORS （オリジン間リソース共有、 Cross-Origin Resource Sharing）を使用しなければならないかを示します。CORS を有効にしていると、汚染されること無く、<canvas> 要素で画像を再利用できます。

• anonymous （デフォルト）：オリジン間要求 (Origin: HTTP ヘッダーを持つ要求) を実行しますが、信用情報 (Cookie、 X.509 証明書、 HTTP ベーシック認証など) は送信しません。サーバーがそのオリジンのサイトに信用情報を付与しない (HTTP の Access-Control-Allow-Origin ヘッダーの設定がない) 場合は、画像が汚染され、その使用も制限されます。
• use-credentials ：信用情報を伴ってオリジン間要求 (HTTP の Origin ヘッダーを持つ要求) を送信します (Cookie、証明書、 HTTP ベーシック認証を使用します)。サーバーが元のサイトに信用情報を付与しない場合は (HTTP の Access-Control-Allow-Credentials ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。

currentTime

倍精度浮動小数点値で、現在の音声の再生位置を秒単位で示す値を返します。または、指定の位置に音声をシークするという用途でも使用されます。

duration

「読み取り専用」の特殊な属性で、倍精度浮動小数点値で、メディアのタイムライン上の音声の長さ (合計の長さ) を秒単位で示します。

loop

論理属性で、指定された場合は音声データが末尾に到達すると、自動的に先頭に戻って繰り返し再生されます。

muted

論理型の属性で、指定された場合は、初期状態が「消音」の状態になります。既定値は”false”です。

preload

列挙型で、データを事前に読み込むかどうかのヒントを示します。（この指定通りに動作するかはブラウザによります）

• none ： 音声を事前に読み込むべきではないことを示します。
• metadata ： 再生時間など、音声のメタデータを読み込むことを示します。
• auto ： ユーザーが音声データを使用しないと思われる場合でも、ファイル全体をダウンロードしても良いことを示します。

既定値はブラウザによって異なりますが、仕様書では”metadata”とすることが推奨されています。

src

埋め込む音声コンテンツの URL を指定します。

発生するイベント

TBD

サンプル

See the Pen オーディオ by Masahiko Iwakiri (@m-iwakiri) on CodePen.