小强的HTML5移动开发之路（15）——HTML5中的音频_H5之家

浏览器虽然发展很快，但是浏览器中的标准还是不完善，在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题，音频播放也一样，直到现在，仍然不存在一项网页上播放视频和音频的标准。现在，在大多数浏览器中，音频是通过插件（比如:flash插件）来播放的。然而，不是所有浏览器都具有这样的插件，所以对音频的播放造成了一定的麻烦。在HTML5的新标准中规定了一种通过audio元素来包含音频的标准方法，下面我们就来详细的了解一下该标签。

一、对音频格式的支持

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

IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis √ √ √

MP3 √ √ √

Wav √ √ √

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

二、如何使用

<!DOCTYPE html> 
<html> 
	<body> 
		<audio src="http://www2.shengda.edu.cn/ytw/gbzx/photo/bgmusic.mp3" controls="controls">
		您的浏览器不支持该HTML5标签
		</audio>
	</body> 
</html>

点击开始按钮，播放歌曲（用的是MP3格式，只适用于IE9以上及Chrome3.0以上浏览器）

control属性显示控制台

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

要运行其他浏览器也支持就要使用如下方式
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

三、audio标签的属性

属性值描述

autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop loop 如果出现该属性，则每当音频结束时重新开始播放。

preload preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src url 要播放的音频的 URL。

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