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="https://developer.mozilla.org/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="https://developer.mozilla.org/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="https://developer.mozilla.org/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/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/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="https://developer.mozilla.org/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();
一些经常被使用的属性,包括 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>
.