引进于 HTML5
简介
HTML <audio>
元素用于在文档中表示音频内容。 <audio>
元素可以包含多个音频资源, 这些音频资源可以使用 src
属性或者<source>
元素来进行描述; 浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器,<audio>元素也可以作为浏览器不识别的内容加入到文档中。
你也可以使用Gecko特有的更加强大的audio API特性在JavaScript 代码中直接生成和控制音频流。详情参见 Introducing the audio API extension 。
使用上下文
Content categories | Flow content, phrasing content, embedded content. If it has a controls attribute: interactive content and palpable content. |
---|---|
允许内容(Permitted content) | 如果元素包含 src 属性:零个或多个 <track> 元素,其后紧跟不包含 <audio> 或者 <video> 媒体元素的透明内容。或者:零个或多个 <source> 元素,其后紧跟零个或多个 <track> 元素,其后紧跟不包含 <audio> 或者 <video> 媒体元素的透明内容。 |
标记省略(Tag omission) | 不允许,开始标签和结束标签都不能省略。 |
允许的父级元素(Permitted parents) | 任何接受嵌入内容的元素。 |
Permitted ARIA roles | application |
DOM 接口(DOM interface) | HTMLAudioElement |
属性
该元素包含 全局属性。
autoplay
- 布尔属性;如果指定(默认值为"false"!);指定后,音频会马上自动开始播放,不会停下来等着数据载入结束。
autobuffer
已废弃 Gecko 2.0- 布尔属性;如果指定,音频将会自动开始加载。即使没有设置自动播放。直到媒体缓存满了或者全部音频文件加载完毕,即使是在首次进入时。该属性应该仅仅用在用户可能会选择播放的音频上;例如用户通过“播放音频”链接来到的一个页面。该属性已在Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 中移除,使用
preload属性取而代之。
buffered
- 你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个
TimeRanges
对象。 controls
- 如果设置了该属性,浏览器将提供一个包含声音,播放进度,播放暂停的控制面板,让用户可以控制音频的播放。
loop
- 布尔属性;如果指定,将循环播放音频。
mozCurrentSampleOffset
- 在音频播放时,表示相对于音频开始处的偏移量的一个数值。
muted
- 表示是否静音的布尔值。默认值为false,表示有声音。
played
- 一个
TimeRanges
对象,表示所有已播放的音频片段。 preload
- 枚举属性,让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一:
none
: 示意用户可能不会播放该音频,或者服务器希望节省带宽;换句话说,该音频不会被缓存;metadata
: 示意即使用户可能不会播放该音频,但获取元数据 (例如音频长度) 还是有必要的。auto
: 示意用户可能会播放音频;换句话说,如果有必要,整个音频都将被加载,即使用户不期望使用。- 空字符串 : 等效于
auto
属性。
假如不设置,默认值就是浏览器定义的了(不同浏览器会选择自己的默认值), 即使规范建议设置为
使用备注:metadata
.autoplay
属性优先于preload
假如用户想自动播放视频,那么很明显浏览器需要下载视频。同时设置autoplay
和preload
属性在规范里是允许的。- 规范没有强制浏览器去遵循该属性的值;这仅仅只是个提示。
src
- 嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性;你可以在audio元素中使用
<source>
元素来替代该属性指定嵌入的音频。 volume
- 音频播放的音量。值从0.0 (无声) 到 1.0 (最大声).
时间偏移量目前是指定为float类型的值,表示偏移的秒数。
备注: HTML 5 规范中,时间偏移量值的定义还没有完成,有可能会变更。
事件
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> <!-- Audio playback with captions --> <audio src="foo.ogg"> <track kind="captions" src="foo.en.vtt" srclang="en" label="English"> <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska"> </audio>
使用source元素的audio元素
<audio controls="controls"> Your browser does not support the <code>audio</code> element. <source src="foo.wav" type="audio/wav"> </audio>
规范
Specification | Status | Comment |
---|---|---|
HTML Living Standard <audio> |
Living Standard | |
HTML5 <audio> |
Recommendation |
浏览器兼容性
特征 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基础支持 | 3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
autoplay 属性 |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
buffered 属性 |
? | 4.0 (2.0) | ? | ? | ? |
controls 属性 |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
loop 属性 |
3.0 | 11.0 (11.0) | 9.0 | 10.5 | 3.1 |
muted 属性 |
? | 11.0 (11.0) | ? | ? | ? |
played 属性(property) |
? | 15.0 (15.0) | ? | ? | ? |
preload 属性 |
3.0 | 4.0 (2.0) | 9.0 | Supported under the older name autobuffer |
3.1 |
src 属性 |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
volume 属性 |
特征 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基础支持 | ? | 1.0 (1.0) | ? | ? | ? |
autoplay 属性 |
? | 1.0 (1.0) | ? | ? | ? |
buffered 属性 |
? | 4.0 (2.0) | ? | ? | ? |
controls 属性 |
? | 1.0 (1.0) | ? | ? | ? |
loop 属性 |
? | 11.0 (11.0) | ? | ? | ? |
muted 属性 |
? | 11.0 (11.0) | ? | ? | ? |
played 属性(property) |
? | 15.0 (15.0) | ? | ? | ? |
preload 属性 |
? | 4.0 (2.0) | ? | ? | ? |
src 属性 |
? | 1.0 (1.0) | ? | ? | ? |
volume 属性 |
备注: 使用Gecko播放音频时,服务器必须提供正确的MIME类型。
另请参阅
- Media formats supported by the audio and video elements
- Introducing the audio API extension
HTMLAudioElement
nsIDOMHTMLMediaElement
<source>
<video>
- Using audio and video
- The
audio
element (HTML5 specification)