3.9 案例实战：插入HTML5音频

视频讲解

在HTML5中，使用新增的<audio>标记可以播放声音文件或音频流，它支持Ogg Vorbis（简称Ogg）、MP3、WAV等音频格式，其用法如下。

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

其中，src属性用于指定要播放的声音文件，controls属性用于提供播放、暂停和音量控件。

如果浏览器不支持<audio>标记，则可以在<audio>与</audio>之间插入一段替换内容，这样旧的浏览器就可以显示这些信息。例如：

     <audio src="samplesong.mp3" controls="controls">
     您的浏览器不支持audio标签。
     </audio>

替换内容不仅可以是文本，还可以是一些其他音频插件，或者是声音文件的链接等。

下面通过完整的示例演示如何在页面内播放音频。本示例使用<source>标记来链接不同的音频文件，浏览器会自己选择第一个可以识别的格式。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，在编辑窗口中，将光标定位在要插入插件的位置。

第3步，选择【插入】|【媒体】|【HTML5 Audio】命令，在编辑窗口中插入一个音频插件图标，如图3.33所示。

图3.33 插入HTML5音频插件

第4步，在编辑窗口中选中插入的音频插件，然后可以在属性面板中设置相关播放属性和播放内容，如图3.34所示。

图3.34 设置HTML5音频属性

☑ 【ID】文本框：定义HTML5音频的ID值，以便脚本进行访问和控制。

☑ 【Class】下拉列表：设置HTML5音频控件的类样式。

☑ 【源】、【Alt源1】和【Alt源2】文本框：在【源】文本框中输入音频文件的位置。或者单击【选择文件】按钮以从计算机中选择音频文件。

对音频格式的支持在不同浏览器上有所不同。如果源中的音频格式不被支持，则会使用【Alt源1】和【Alt源2】文本框中指定的格式，浏览器选择第一个可识别格式来显示音频。

建议使用多重选择，当从文件夹中为同一音频选择3个视频格式时，列表中的第一个格式将用于“源”。列表中下列的格式用于自动填写“Alt源1”和“Alt源2”。

☑ 【Controls】复选框：设置是否在页面中显示播放控件。

☑ 【Autoplay】复选框：设置是否在页面加载后自动播放音频。

☑ 【Loop】复选框：设置是否循环播放音频。

☑ 【Muted】复选框：设置是否静音。

☑ 【Preload】下拉列表：预加载选项。选择auto选项，则会在页面下载时加载整个音频文件；选择metadata选项，则会在页面下载完成之后仅下载元数据；选择none选项，则不进行预加载。

☑ 【Title】文本框：为音频文件输入标题。

☑ 【回退文本】文本框：输入在不支持HTML5的浏览器中显示的文本。

第5步，按图3.34所示进行设置：显示播放控件，自动播放，循环播放，允许提前预加载，鼠标指针经过时的提示标题为“播放Wah Game Loop”，回退文本为“当前浏览器不支持HTML音频”。然后切换到【代码】视图，可以看到生成以下的代码：

     <audio title="播放Wah Game Loop" preload="auto" controls autoplay loop >
         <source src="medias/Wah Game Loop.mp3" type="audio/mp3">
         <source src="medias/Wah Game Loop.ogg" type="audio/ogg">
         <p>当前浏览器不支持HTML音频</p>
     </audio>

从上面的代码可以看出，在<audio>标记中，使用两个新的<source>标记替换了先前的src属性。这样可以让浏览器根据自身播放能力自动选择，挑选最佳的来源进行播放。对于来源，浏览器会按照声明顺序判断，如果支持的不止一种，那么浏览器会选择支持的第一个来源。数据源列表的排放顺序应按照用户体验由高到低或者服务器消耗由低到高列出。

第6步，保存页面，按F12键在浏览器中预览，显示效果如图3.35所示。

图3.35 播放HTML5音频

在IE浏览器中可以看到一个比较简单的音频播放器，包含了播放、暂停、位置、时间显示、音量控制这些常用控件。