HTMLAudioElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

この要素は 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イベント名 プロパティにイベントリスナーを代入してください。

仕様書

Specification
HTML # htmlaudioelement