Audio()

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.

Audio() 构造器创建并返回一个 HTMLAudioElement,可以将它附加到文档中以供用户交互,也可以用于管理和播放背景音乐。

语法

audioObj = new Audio(url);

参数

url 可选

一个可选的、包含音频文件 URL 的 DOMString

返回值

新创建的 HTMLAudioElement 对象,被设置为播放指定 url的音频文件。新对象的 preload 属性被设置为 auto 且它的 src 属性被设置为具体的 URL 或 null (当没有提供 URL 时)。如果提供了 URL,浏览器在返回新对象之前开始异步加载媒体资源。

使用说明

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

检测回放时机

提供三种方法给开发者,判断音频文件是否已经加载,允许开始回放:

  • 检测 readyState 属性的值。如果值是 HTMLMediaElement.HAVE_FUTURE_DATA,说明有足够的数据开始回放并能至少播放一小段时间。如果值是 HTMLMediaElement.HAVE_ENOUGH_DATA,根据当前的下载速率,说明有足够的数据,你可以无干扰地播放至结束。
  • 监听 canplay 事件。当足够的音频数据被发送至 <audio> 元素,能开始回放,即使可能出现中断时,会触发该事件。
  • 监听 canplaythrough 事件。当音频应该没有干扰能够顺利播放时将会触发该事件。

基于事件的方法是最优的:

js
myAudioElement.addEventListener("canplaythrough", (event) => {
  /* 音频可以播放;如果权限允许则播放 */
  myAudioElement.play();
});

内存使用与管理

如果所有使用 Audio() 构造函数创建的 audio 元素被删除,根据 JavaScript 垃圾回收机制,如果播放正在进行,内存中的 audio 元素不会被移除。相反,音频将会继续播放并且它的对象会保留在内存中,直到播放结束或是被暂停(例如调用 pause())。在那个时候,这个对象才会成为垃圾回收的目标。

规范

Specification
HTML
# dom-audio-dev

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见