HTML5 使用audio

■知识点

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

用法如下：

    <audio src="samplesong.mp3" controls="controls"></audio>

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

■实例设计

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

<audio controls〉

    <source src="medias/test.ogg" type="audio/ogg">

    <source src="medias/test.mp3" type=naudio/mpeg">

    <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属性。

<audioautoplay loop>

    <source src="medias/test.ogg" type="audio/ogg">

    <source src="medias/test.mp3" type="audio/mpeg">

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

</audio>