HTMLAudioElement - Web API 接口参考 编辑

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

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="/wiki/zh-CN/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="/wiki/zh-CN/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="/wiki/zh-CN/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/wiki/zh-CN/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/wiki/zh-CN/docs/Web/API/HTMLMediaElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLMediaElement</text></a><polyline points="331,89  321,84  321,94  331,89" stroke="#D4DDE4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#D4DDE4"/><a xlink:href="/wiki/zh-CN/docs/Web/API/HTMLAudioElement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="211" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLAudioElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

构造函数

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

浏览器兼容性

BCD tables only load in the browser

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.

参见

• Web media technologies
• Using audio and video in HTML
• HTML element implementing this interface: <audio>.