题目内容

HTML5 使用audio

题目答案

■知识点

HTML5新增的<audio>标签可以播放声音文件或音频流，支持OggVorbis、MP3、WAV等音频格式。

用法如下：

其中src属性用于指定要播放的声音文件，controls属性用于设置是否显示工具条。<audio>标签支持属性如表所示。

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

■实例设计

<audio>标签可以包裹多个<s0Urce>标签，用来导入不同的音频文件，浏览器会自动选择第一个可以识别的格式进行播放。

<audio controls〉

<p>你的浏览器不支持HTML5 audio,你可以<a href="piano.mp3">下载音频文件</a> (MP3, 1.3 MB)</p>

</audio>

以上代码在Chrome浏览器中的运行结果如图3.5所示，这个audio元素（含默认控件集）定义了两个音频源文件，一个编码为Ogg，另一个为MP3。完整的过程同指定多个视频源文件的过程是一样的。浏览器会忽略它不能播放的，仅播放它能播放的。

支持Ogg的浏览器（如Firefox)会加载piano.ogg。Chrome同时理解Ogg和MP3，但是会加载Ogg文件，因为在audio元素的代码中，Ogg文件位于MP3文件之前。不支持Ogg格式，但支持MP3格式的浏览器（IE10)会加载test.mp3,旧浏览器(如IE8)会显示备用目息。

■小结

<source>标签可以为〈video〉和<audio>标签定义多媒体资源，它必须包裹在<video>或<audio>标识符内。<source>标签包含如下3个可用属性。

media：定义媒体资源的类型。

src：定义媒体文件的URL。

type：定义媒体资源的MIME类型。如果媒体类型与源文件不匹配，浏览器可能会拒绝播放。

可以省略type属性，让浏览器自动检侧编码方式。

为了兼容不同浏览器，一般使用多个<sourCe>标签包裹多种媒体资源。对于数据源，浏览器会按照声明顺序进行选择，如果支持的不止一种，那么浏览器会优先播放位置靠前的媒体资源。数据源列表的排放顺序应按照用户体验由高到低，或者服务器消耗由低到高列出。

例如，下面代码将在页面中插入背景音乐：在<audio>标签中设置autoplay和loop属性。

您的浏览器不支持<audio>标签。

</audio>