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
インターフェイスは <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イベント名
プロパティにイベントリスナーを代入してください。
仕様書
Specification |
---|
HTML Standard # htmlaudioelement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- ウェブメディア技術
- HTML での音声と動画の使用
- このインターフェイスを実装した HTML 要素:
<audio>