简介

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  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
audioChrome Full support 3Edge Full support YesFirefox Full support 3.5
Notes
Full support 3.5
Notes
Notes For Firefox to play audio, the server must serve the file using the correct MIME type.
IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support 3Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes For Firefox to play audio, the server must serve the file using the correct MIME type.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
autoplayChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support 3Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
bufferedChrome ? Edge Full support YesFirefox Full support 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
controlsChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support 3Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
loopChrome Full support 3Edge Full support YesFirefox Full support 11IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support 3Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
mozcurrentsampleoffset
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 3.5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mutedChrome ? Edge Full support YesFirefox Full support 11IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android ?
playedChrome Full support 49Edge Full support 14Firefox Full support 15IE Full support 11Opera Full support 46Safari Full support 9.1WebView Android Full support 49Chrome Android Full support 49Edge Mobile Full support 14Firefox Android Full support 15Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
preloadChrome Full support 3
Notes
Full support 3
Notes
Notes Defaults to metadata in Chrome 64.
Edge Full support YesFirefox Full support 4
Full support 4
No support 3.5 — 4
Alternate Name
Alternate Name Uses the non-standard name: autobuffer
IE Full support 9Opera Full support 15
Notes
Full support 15
Notes
Notes Defaults to metadata in Opera 51.
No support 10.5 — 15
Alternate Name
Alternate Name Uses the non-standard name: autobuffer
Safari Full support 3.1WebView Android Full support 3
Notes
Full support 3
Notes
Notes Defaults to metadata in Chrome 64.
Chrome Android Full support 18
Notes
Full support 18
Notes
Notes Defaults to metadata in Chrome 64.
Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 14
Notes
Full support 14
Notes
Notes Defaults to metadata in Opera 51.
No support ? — 14
Alternate Name
Alternate Name Uses the non-standard name: autobuffer
Safari iOS Full support YesSamsung Internet Android Full support Yes
srcChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support 3Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
volumeChrome ? Edge Full support YesFirefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

备注: 使用Gecko播放音频时,服务器必须提供正确的MIME类型。

另请参阅

文档标签和贡献者

标签: 
最后编辑者: mdnwebdocs-bot,