Html5 audio标签使用详解

audio标签的语法结构:

<audio src="音频地址">您的浏览器不支持audio标签</audio>

(上述audio中间的文字可以去掉，加上这些文字是为了让一些不支持audio标签的浏览器进行识别。)

audio支持的属性主要有: src，loop，autoplay，controls，preload

●src 音频文件链接地址

●loop 设置是否循环播放

●autoplay 是否自动播放了

●controls 是否打开控制音频的控件面板

●preload 是否加载（1、none：默认不加载，按需加载。适合，比如你的文章中有很多audio，你需要用控件或者js来控制它们是否播放；2、metadata:：元数据，默认不加载，但是可以提取该音频的元数据信息。适合，你添加了一个音频，并显示控件，但是你需要在不播放该音频的时候调用它的一些信息；3、auto：自动加载，如果不是动态载入的audio，该音频会随页面一起加载进来。适合，一些音频较多的游戏类页面，在游戏加载完成的时候将游戏声音全部加载进来）

浏览器对于audio标签和音频格式的兼容性：

可以看出只有ogg格式的音频，在浏览器里被支持的最广泛。除了safari，其它四种主流浏览器都支持。

audio标签的使用实例：

<audio preload="auto" controls>

<source src="http://www.niumowang.org/wp-content/uploads/2012/03/beyond.ogg"/>

<source src="http://res-tts.iciba.com/tts_dj/9/0/1/901ec07252c0e1a912d64763f7f1a6dd.mp3"/>

<source src="http://www.niumowang.org/wp-content/uploads/2012/03/huan.wav"/>

</audio>

主流浏览器对音频无障碍播放的解决方案：

起码准备有两种格式的音频文件（格式之间可以用工具进行转换），分别用source引用。浏览器自动识别使用其中一种source来进行播放。