HTML <audio> 元素

HTML <audio> 元素用于将声音内容嵌入到文档中。它可以包含一个或多个音频源，使用 src 属性或 <source> 元素表示：浏览器将选择最合适的一个。它也可以通过 MediaStream 用于流媒体。

播放声音：

<audio controls>
  <source src="/examples/horse.ogg" type="audio/ogg">
  <source src="/examples/horse.mp3" type="audio/mpeg">
  您的浏览器不支持 <code>audio</code> 元素。
</audio>

尝试一下 »

特性

内容类别	流式内容，短语内容，嵌入内容。如果元素设置了 controls 属性，则属于 交互内容 和 可触知内容。
允许的内容	如果元素设置了 src 属性：则接受零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video> 媒体元素的透明内容。否则：零个或多个 <source> 元素，其后紧跟零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video> 媒体元素的透明内容。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受嵌入内容元素的内容。
允许的 ARIA 角色	application
DOM 接口	HTMLAudioElement

属性

该元素包含了全局属性。

autoplay

一个布尔属性：如果指定了该属性，音频会尽快自动开始播放，而无需等待整个音频文件完成下载。

网站自动播放音频（或具有音轨的视频）的话，可能会给用户带来不愉快的体验，因此应尽可能避免。如果您必须提供自动播放功能，您应该设置为可选的（要求用户专门启用它）。但是，如果是先创建了该元素，稍后在用户控制下设置了源地址才自动播放，则该属性会很有帮助。

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，则显然浏览器需要下载视频。
• 规范没有强制浏览器去遵循该属性的值；这只是一个提示。

src

要嵌入的音频的 URL。这受 HTTP 访问控制的约束。这是一个可选属性；您也可以在当前 audio 中使用 <source> 元素来替代该属性，指定要嵌入的音频。

volume

播放的音量，范围为 0.0（无声）至 1.0（最大）。

时间偏移量指定为浮点值，表示要偏移的秒数。

注意： HTML5 规范中的时间偏移量定义尚未完成，可能会更改。

事件属性

音频元素可以触发各种事件。

<audio> 元素支持 HTML 的事件属性。

使用注意

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

基本

对于不支持 <audio> 元素的浏览器，可以在 <audio></audio> 标签中增加提示内容（浏览器会直接展示出来）。

最基本的播放功能可以通过 controls 属性控制（见下面的例子）； 对于更高级的使用，可以使用 HTML Media API 来操纵音频的播放和控制，更具体地说，可以使用 HTMLAudioElement 接口中定义的功能。

音频流 / Web Audio API

您还可以使用 Web Audio API 直接通过 JavaScript 代码生成和操纵音频流。有关详细信息，请参阅 Web Audio API。

<audio> 和字幕

虽然 HTML5 <video> 可以通过 <track> 元素包含字幕（请参阅向 HTML5 视频添加字幕和字幕 ），但是 <audio> 元素不能这样做，因为包含在 <audio></audio> 标签内的任何 <track> 元素都被忽略。有关更多有用的信息和解决方法，请参阅 Ian Devlin 的WebVTT 和音频。

实例

基本用法

简单的音频播放

<audio controls="controls" src="/examples/horse.ogg">
  您的浏览器不支持 <code>audio</code> 元素。
</audio>

尝试一下 »

<audio> 元素与 <source> 元素

<audio controls="controls">
  <source src="/examples/horse.ogg" type="audio/ogg">
  您的浏览器不支持 <code>audio</code> 元素。
</audio>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <audio> 的定义	现行的标准	-
HTML5 <audio> 的定义	推荐	-

桌面浏览器兼容性

移动浏览器兼容性

1. 通过 Firefox 来播放音频，服务器提供的文件必须使用正确的 MIME 类型。

2. 通过 autobuffer 支持。

相关链接

• <source>
• <video>
• audio 元素 (HTML5 规范)