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

浏览器兼容性

另见