HTMLAudioElement

HTMLAudioElement 接口提供对 <audio> 元素的属性访问及一系列操控它的方法，它基于并从 HTMLMediaElement 接口继承属性和方法。

构造函数

Audio()
创建并返回一个新的 HTMLAudioElement 对象，如果提供音频文件 URL，则开始加载音频文件。

属性

没有具体的属性；从父类 HTMLMediaElement 和 HTMLElement 继承属性。

方法

从父类 HTMLMediaElement 和 HTMLElement 继承方法，自身不提供方法。

废弃的且仅适用于 Mozilla 的方法

以下方法是未标准化的，请勿使用.

mozCurrentSampleOffset()
Returns the number of samples form the beginning of the stream that have been written so far into the audio stream created by calling mozWriteAudio().
mozSetup()
Sets up the audio stream to allow writing, given the number of audio channels (1 or 2) and the sample rate in kHz.
mozWriteAudio()
Writes a batch of audio frames to the stream at the current offset, returning the number of bytes actually written to the stream.

示例

基本用法

你可以完全使用 JavaScript 的 Audio() 构造函数来创建一个 HTMLAudioElement ：

var audioElement = new Audio('car_horn.wav');

然后你可以在这个元素上调用 play() 方法

audioElement.play();

一个常见的需求是在页面加载后马上去播放音频，现代浏览器的默认自动播放策略会阻止这一行为，参见 firefox 和 chrome 寻找最佳实践和解决方案。

一些经常被使用的属性，包括 src、currentTime、duration、paused、muted 和 volume。以下这段代码赋值音频文件的播放时长给一个变量：

var audioElement = new Audio('car_horn.wav');
audioElement.addEventListener('loadeddata', () => {
  let duration = audioElement.duration;
  // duration 变量现在存放音频的播放时长（单位秒）
})

事件

从父类 HTMLMediaElement 和祖先 HTMLElement 继承方法. 使用 addEventListener() 监听事件或者赋值一个事件监听器给这个接口的 oneventname 属性。

规范

Specification Status Comment
HTML Living Standard
HTMLAudioElement		 Living Standard
HTML5
HTMLAudioElement		 Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
HTMLAudioElementChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 2Samsung Internet Android Full support 1.0
Audio() constructorChrome Full support YesEdge Full support 12Firefox Full support 3.5IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
mozCurrentSampleOffset()
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support 4 — 31IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support ? — 31Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozSetup()
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support 4 — 31IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support ? — 31Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozWriteAudio()
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 4IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

参见