HTMLAudioElement: Audio() 构造函数

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

Audio() 构造函数创建并返回一个新的 HTMLAudioElement 对象,该对象可以附加到文档以供用户交互和/或收听,也可以离屏使用以管理和播放音频。

语法

js
new Audio()
new Audio(url)

参数

url 可选

一个可选字符串,包含要与新音频元素关联的音频文件的 URL。

返回值

一个新的 HTMLAudioElement 对象,配置为从 url 指定的文件播放音频。新对象的 preload 属性设置为 auto,其 src 属性设置为指定的 URL,如果没有提供 URL 则设置为 null。如果指定了 URL,浏览器会在返回新对象之前开始异步加载媒体资源。

用法说明

您也可以使用其他元素创建方法,例如 document 对象的 createElement() 方法来构造一个新的 HTMLAudioElement

确定何时可以开始播放

有三种方法可以确定音频文件已加载足够的数据以开始播放:

  • 检查 readyState 属性的值。如果它是 HTMLMediaElement.HAVE_FUTURE_DATA,则有足够的数据可供开始播放,并能至少播放一小段时间。如果它是 HTMLMediaElement.HAVE_ENOUGH_DATA,则有足够的数据,根据当前的下载速率,您应该能够无中断地将音频播放到最后。
  • 监听 canplay 事件。当有足够的音频可供开始播放时,该事件会发送到 <audio> 元素,但可能会发生中断。
  • 监听 canplaythrough 事件。当估计音频应该能够无中断地播放到最后时,会发送此事件。

基于事件的方法是最好的

js
myAudioElement.addEventListener("canplaythrough", (event) => {
  /* the audio is now playable; play it if permissions allow */
  myAudioElement.play();
});

内存使用和管理

如果使用 Audio() 构造函数创建的音频元素的所有引用都被删除,如果当前正在播放音频,JavaScript 运行时垃圾回收机制不会将该元素本身从内存中删除。相反,音频将继续播放,对象将保留在内存中,直到播放结束。届时,对象将可被垃圾回收。

规范

规范
HTML
# dom-audio-dev

浏览器兼容性

另见