audio
<audio>
该HTML 元素用于嵌入文档中的声音内容。它可能包含一个或多个音频源,用src<source>属性或<audio>元素表示:浏览器将选择最合适的一个。它也可以是流媒体的目的地,使用一个MediaStream。
内容类别 | 流内容,短语内容,嵌入式内容。如果它具有控件属性:交互式内容和可触及的内容。 |
---|---|
允许的内容 | 如果元素具有src属性:零个或多个<track>元素,后跟不包含媒体元素的透明内容,即不包含<audio>或<video>元素:零个或多个<source>元素,后跟零或更多<track>元素,后面是不包含媒体元素的透明内容,即不包含<audio>或<video>。 |
标记遗漏 | 没有,起始和结束标签都是强制性的。 |
允许父母 | 任何接受嵌入内容的元素。 |
允许ARIA角色 | 应用 |
DOM界面 | HTMLAudioElement |
属性
该元素包含 全局属性。
autoplay
布尔属性;如果指定(默认值为"false"!);指定后,音频会马上自动开始播放,不会停下来等着数据载入结束。
自动播放音频(或带音轨的视频)的站点对于用户来说可能是一个不愉快的体验,所以应尽可能避免。如果您必须提供自动播放功能,您应该选择启用(要求用户专门启用它)。但是,在用户控制下创建媒体元素的源将在稍后设置时,这可能是有用的。
buffered
你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges
对象。
none
: 示意用户可能不会播放该音频,或者服务器希望节省带宽;换句话说,该音频不会被缓存;
metadata
: 示意即使用户可能不会播放该音频,但获取元数据 (例如音频长度) 还是有必要的。
auto
: 示意用户可能会播放音频;换句话说,如果有必要,整个音频都将被加载,即使用户不期望使用。
空字符串
: 等效于auto
属性。
假如不设置,默认值就是浏览器定义的了(不同浏览器会选择自己的默认值), 即使规范建议设置为 metadata
.
使用备注:
autoplay
属性优先于preload
假如用户想自动播放视频,那么很明显浏览器需要下载视频。同时设置autoplay
和preload
属性在规范里是允许的。
- 规范没有强制浏览器去遵循该属性的值;这仅仅只是个提示。
src嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性;你可以在audio元素中使用 <source>元素来替代该属性指定嵌入的音频。
时间偏移量目前是指定为float类型的值,表示偏移的秒数。
备注:
HTML 5 规范中,时间偏移量值的定义还没有完成,有可能会变更。
事件
audio元素支持的事件
例子
基本用法
不支持<audio>元素的浏览器的其他内容可以添加到开始和结束<audio></audio>标记中。
最基本的播放功能可以使用该controls
属性(见下面的示例); 对于更高级的用法,可以使用HTML Media API操作音频播放和控件,更具体地说,可以使用HTMLAudioElement
界面中定义的功能。
音频流/网络音频API
您也可以使用Web Audio API来直接生成和处理来自JavaScript代码的音频流。有关详细信息,请参阅Web Audio API。
<audio>和字幕
虽然HTML5 <video>可以通过<track>添加字幕(请参阅将标题和字幕添加到HTML5视频),但<audio>元素不能 : 忽略标签<track>内包含的任何<audio></audio>元素。请参阅Ian Devlin的WebVTT和Audio获取更多有用的信息和解决方法。
示例
基本用法
<!-- Simple audio playback -->
<audio
src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
使用source元素的audio元素
<audio controls="controls">
Your browser does not support the <code>audio</code> element.
<source src="foo.wav" type="audio/wav">
</audio>
规范
规范 | 状态 | 评论 |
---|---|---|
HTML Living Standard该规范中'<audio>'的定义。 | 生活水平 | |
HTML5该规范中'<audio>'的定义。 | 建议 | |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 3.0 | (Yes) | 3.5 (1.9.1) 1 | 9.0 | 10.5 | 3.1 |
autoplay attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
buffered attribute | ? | (Yes) | 4.0 (2.0) | ? | ? | ? |
controls attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
loop attribute | 3.0 | (Yes) | 11.0 (11.0) | 9.0 | 10.5 | 3.1 |
muted attribute | ? | (Yes) | 11.0 (11.0) | ? | ? | ? |
played property | 49 | 14 | 15.0 (15.0) | 11 | 46 | 9.1 |
preload attribute | 3.0 | (Yes) | 4.0 (2.0) | 9.0 | (Yes) 2 | 3.1 |
src attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
volume attribute | | (Yes) | | | | |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 1.0 (1.0) 1 | ? | ? | ? |
autoplay attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
buffered attribute | ? | (Yes) | 4.0 (2.0) | ? | ? | ? |
controls attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
loop attribute | ? | (Yes) | 11.0 (11.0) | ? | ? | ? |
muted attribute | ? | (Yes) | 11.0 (11.0) | ? | ? | ? |
played property | ? | (Yes) | 15.0 (15.0) | ? | ? | ? |
preload attribute | ? | (Yes) | 4.0 (2.0) | ? | ? | ? |
src attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
volume attribute | | (Yes) | | | | |