
上QQ阅读APP看书,第一时间看更新
6.1 <audio>标记
目前,大多数音频是通过插件来播放的,如常见的播放插件Flash,这就是为什么用户在用浏览器播放音乐时,常常需要安装Flash插件的原因。但是并不是所有的浏览器都拥有同样的插件。
与HTML4相比,HTML5新增了<audio>标记,规定了一种包含音频的标准方法。
6.1.1 <audio>标记概述
<Audio>标记主要是定义播放声音文件或音频流的标准。支持3种音频格式,分别为ogg、mp3和wav。
如果需要在HTML5网页中播放音频,则输入的基本格式如下:
<audio src="song.mp3" controls="controls"> </audio>
技巧提示
其中src属性是规定要播放的音频地址,controls属性是提供添加播放、暂停和音量的控件。
另外,在<audio>与</audio>之间插入的内容是供不支持audio元素的浏览器显示的。
【例6.1】(实例文件:ch06\6.1.html)
<!DOCTYPE html> <html> <head> <title>audio</title> <head> <body> <audio src="song.mp3" controls="controls"> 您的浏览器不支持audio标记! </audio> </body> </html>
如果用户的浏览器是IE 8.0或以前的版本,浏览效果如图6-1所示,可见目前IE浏览器还不支持<audio>标记。

图6-1 不支持<audio>标记的效果
在IE 11.0中浏览效果如图6-2所示,可以看到加载的音频控制条,并能听到加载的音频文件。

图6-2 支持<audio>标记的效果
6.1.2 <audio>标记的属性
<audio>标记的常见属性和含义如表6-1所示。
表6-1 <audio>标记常见属性

另外,<audio>标记可以通过source属性添加多个音频文件。具体格式如下:
<audio controls="controls"> <source src="123.ogg" type="audio/ogg"> <source src="123.mp3" type="audio/mpeg"> </audio>
6.1.3 音频解码器
音频解码器定义了音频数据流编码和解码的算法。其中,编码器主要是对数据流进行编码操作,用于存储和传输;解码器主要是对音频文件进行解码,然后进行播放操作。目前,使用较多的音频解码器是Vorbis和ACC。
6.1.4 <audio>标记浏览器的支持情况
不同的浏览器对<audio>标记支持也不同。表6-2列出了应用比较广泛的浏览器对<audio>标记的支持情况。
表6-2 <audio>标记的浏览器支持情况
