HTMLAudioElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

HTMLAudioElement インターフェイスは<audio> 要素のプロパティと、操作するメソッドへのアクセスを提供します。

この要素はHTMLMediaElement インターフェイスから派生しており、プロパティとメソッドを継承しています。

コンストラクター

Audio(): 新しいHTMLAudioElement オブジェクトを作成し、返します。オプションとして、ファイルの URL が指定された場合は、音声ファイルを読み込む処理を開始します。

インスタンスプロパティ

固有のプロパティはありません。親であるHTMLMediaElement およびHTMLElement からプロパティを継承しています。

インスタンスメソッド

HTMLMediaElement およびHTMLElement からメソッドを継承しています。

例

基本的な使用

Audio() を使用すると、HTMLAudioElement を完全に JavaScript で生成することができます。

const audioElement = new Audio("car_horn.wav");

それからこの要素に対してplay() を呼び出すことができます。

audioElement.play();

メモ:よくあるのが、ページを読み込んだらすぐに audio 要素を再生しようとすることです。現代のブラウザーは、既定の自動再生ポリシーによって、このようなことが起こらないようにブロックしています。良い習慣と回避方法については、Firefox およびChrome のものを参照してください。

audio 要素のプロパティとしてよく用いられるものには、src,currentTime,duration,paused,muted,volume などがあります。このスニペットは、音声ファイルの再生時間を変数にコピーします。

const audioElement = new Audio("car_horn.wav");audioElement.addEventListener("loadeddata", () => {  let duration = audioElement.duration;  // これで変数 duration に音声クリップの再生時間（2 つ目）が格納される});

イベント

親であるHTMLMediaElement およびその祖先であるHTMLElement からイベントを継承しています。 イベントを待ち受けするには、addEventListener() を使用するか、このインターフェイスのonイベント名 プロパティにイベントリスナーを代入してください。