HTML audio 标签
HTML <audio> 简介
HTML <audio> 元素用于在文档中表示音频内容。
<audio> 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者 <source> 元素来进行描述； 浏览器将会选择最合适的一个来使用。
因为这个标签是 HTML5 引入的，是 HTML5 中的新属性。
对于不支持 <audio> 元素的浏览器，<audio> 元素也可以作为浏览器不识别的内容加入到文档中。
除了 HTML 以外，你还可以使用 JavaScript 直接生成和控制音频流，具体详情参见 JavaScript 音频 API
本页介绍的内容，源码托管在 Github 上：https://github.com/axihe/api-html/blob/master/audio-video/tag-audio.html
提示和注释
**提示：**可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。
HTML <audio> 标签功能
<audio> 标签定义声音，比如音乐或其他音频流。
目前，<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 |
HTML <audio> 使用上下文
- 内容类别
流内容，短语内容，嵌入内容。
如果具有控件属性：交互内容和可触知的内容。
- 允许内容
如果元素包含 src 属性：零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。
或者：零个或多个 <source> 元素，其后紧跟零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。
- 标签是否可省略
不允许，开始标签和结束标签都不能省略。
- 允许的父级元素
任何接受嵌入内容的元素。
- Permitted ARIA roles
application
- DOM 接口
HTMLAudioElement
HTML <audio> 标签用法
基本用法
<!-- 演示内容开始 -->
<audio src="axihe.mp3" autoplay controls="controls">
老铁，你的浏览器不支持 <code>audio</code> 元素.
</audio>
<!-- 演示内容结束 -->
上图的代码和 MP3 资源放在了 Github 上：https://github.com/axihe/api-html/blob/master/audio-video/tag-audio.html
使用 source 元素的 audio 元素
<audio controls="controls">
Your browser does not support the <code>audio</code> element.
<source src="horse.ogv" type="audio/wav">
<source src="axihe.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
这个如果支持ogv, 播放第一个，不支持就使用第二个 Mp3；
注意；上面的代码在 IE9 下跑是播放第二个
axihe.mp3格式的资源，而不是第一个horse.ogv
如果我们把代码放到 IE9 以下的模式来运行，发现是不能正常跑的；这时候我们设置的文字就有效果了；
如下图
浏览器支持
IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。
注释： IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。
HTML4 与 HTML5 之间的差异
<audio> 标签是 HTML5 的新标签。
属性
New ：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
autoplayNew |
autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
autobuffer废弃 |
false/true | 如果指定，音频将会自动开始加载，即使没有设置自动播放。 |
| buffered | 该属性包含一个 TimeRanges 对象 | 你可以通过该属性获取已缓冲的资源的时间段信息 |
controlsNew |
controls | 如果出现该属性，则向用户显示音频控件（比如播放 / 暂停按钮）。 |
loopNew |
loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| mozCurrentSampleOffset | 数值 | 在音频播放时，表示相对于音频开始处的偏移量的一个数值。 |
mutedNew |
muted | 如果出现该属性，则音频输出为静音。 |
| played | 一个 TimeRanges 对象 | 表示所有已播放的音频片段。 |
preloadNew |
auto metadata none |
规定当网页加载时，音频是否默认被加载以及如何被加载。 |
srcNew |
URL | 规定音频文件的 URL。 |
| volume | 值从 0.0 （无声） 到 1.0 （最大声） | 音频播放的音量。 |
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> 标签支持 HTML 全局属性。
事件属性
<audio> 标签支持 HTML 事件属性
