HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通(视频教学版)
上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>标记的浏览器支持情况