HTML5 audio标签 音频播放

HTML5 audio标签 音频播放

大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。

<audio src="music/live.mp3" autoplay controls="controls"></audio>

audio 标签的属性

属性	           值	        描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。自动播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。显示播放组件
loop	    loop	    如果出现该属性，则每当音频结束时重新开始播放。循环播放
preload	    preload	    如果出现该属性，则音频在页面加载时进行加载，并预备播放。意思是：手动点击播放。如果使用 "autoplay"，则忽略该属性。
src	        url	        要播放的音频的 URL。

音频格式

当前，audio 元素支持三种音频格式：

格式    IE9	 Firefox3.5	 Opera10.5	 Chrome 3.0	 Safari 3.0
Ogg		        √	        √	        √	
MP3  	√			                    √	        √
Wav		        √	        √		                √

从上面的表格中得知，要所有浏览器都可以播放音频，至少要使用两种音频格式。audio 元素允许多个 source 元素，source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式。浏览器从上往下解析，找到可以播放的音频格式，即可播放。如果遇到无法播放的格式，会继续往下解析，直到找到可以播放的格式为之。
<audio> 与 </audio> 之间插入的内容是不在浏览器显示的，但是由于浏览器版本低，无法识别该标签，所以<audio> 与 </audio> 之间插入的内容会在低版本浏览器中显示。运用这个原理可以提示用户更新浏览器。

实例

<audio controls="controls">   这种方式audio标签中不再使用src引入音频了。
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
    亲爱的用户：你的浏览器版本太低，无法享受这个页面的所有音频功能，建议进行更新。
    <a href="#">点击我下载新版浏览器</a>
</audio>

注意：

使用该标签，无法限制用户的下载。

× 请我吃糖~