HTMLAudioElement

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

HTMLAudioElement 介面提供了對 <audio> 元素的屬性的訪問,以及操作這些元素的方法。

此元素基於 HTMLMediaElement 介面,並繼承了其屬性和方法。

EventTarget Node Element HTMLElement HTMLMediaElement HTMLAudioElement

建構函式

Audio()

建立並返回一個新的 HTMLAudioElement 物件,如果提供了檔案 URL,還可以選擇開始載入音訊檔案到其中。

例項屬性

沒有特定屬性;繼承自其父級 HTMLMediaElementHTMLElement 的屬性。

例項方法

繼承自其父級 HTMLMediaElementHTMLElement 的方法。它沒有自己的方法。

示例

基本用法

你可以使用 Audio() 建構函式完全透過 JavaScript 建立一個 HTMLAudioElement

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

然後,你可以在該元素上呼叫 play() 方法。

js
audioElement.play();

注意: 一個常見的陷阱是在頁面載入時立即嘗試播放音訊元素。現代瀏覽器的預設自動播放策略會阻止這種情況發生。請參閱 FirefoxChrome 以瞭解最佳實踐和解決方法。

音訊元素中更常用的屬性包括 srccurrentTimedurationpausedmutedvolume。此程式碼片段會將音訊檔案的時長複製到一個變數中。

js
const audioElement = new Audio("car_horn.wav");
audioElement.addEventListener("loadeddata", () => {
  let duration = audioElement.duration;
  // The duration variable now holds the duration (in seconds) of the audio clip
});

事件

繼承自其父級 HTMLMediaElement 和其祖先 HTMLElement 的方法。 使用 addEventListener() 或透過分配事件監聽器給此介面的 oneventname 屬性來監聽事件。

規範

規範
HTML
# htmlaudioelement

瀏覽器相容性

另見