html5音频audio元素 – HTML5教程

上一章HTML5教程请查看：html5 SVG绘制以及和canvas的区别

在本教程中，你将学习如何将音频嵌入到HTML文档中。

在HTML文档中嵌入音频

将音频插入到web页面之前并不容易，因为web浏览器没有一个统一的标准来定义像音频这样的嵌入式媒体文件。

在本章中，我们将演示在网页中嵌入声音的多种方法，从使用简单的链接到使用最新的HTML5 <audio>元素。

使用HTML5音频audio元素

新引入的HTML5 <audio>元素提供了一种将音频嵌入web页面的标准方法。然而，audio元素相对较新，但是它可以在大多数现代web浏览器中工作。

下面的示例使用浏览器的默认控件集将音频插入到HTML5文档中，其中一个源由src属性定义。

<audio controls="controls" src="media/birds.mp3">
    你的浏览器不支持HTML5音频元素
</audio>

一个音频，使用浏览器的默认控件集，具有可选的源。

<audio controls="controls">
    <source src="media/birds.mp3" type="audio/mpeg">
    <source src="media/birds.ogg" type="audio/ogg">
    你的浏览器不支持HTML5音频元素
</audio>

上面例子中的“ogg”音轨可以在Firefox、Opera和Chrome中使用，而“mp3”格式的音轨可以在Internet Explorer和Safari中使用。

链接音频文件

你可以制作音频文件的链接，然后点击播放。

让我们尝试下面的例子来理解它是如何工作的：

<a href="media/sea.mp3">Track 1</a>
<a href="media/wind.mp3">Track 2</a>

使用object元素

对象>元素用于将不同类型的媒体文件嵌入到HTML文档中。最初，此元素用于插入ActiveX控件，但根据规范，对象可以是任何媒体对象，如音频、视频、PDF文件、Flash动画甚至图像。

下面的示例代码将一个简单的音频文件嵌入到web页面中。

<object data="media/sea.mp3"></object>
<object data="media/sea.ogg"></object>

警告：<object>元素不被广泛支持，很大程度上取决于被嵌入对象的类型。其他方法如HTML5 <audio> element或第三方HTML5 audio player在很多情况下可能是更好的选择。

使用embed元素

元素用于将多媒体内容嵌入到HTML文档中。

下面的代码片段将音频文件嵌入到web页面中。

<embed src="media/wind.mp3">
<embed src="media/wind.ogg">

警告：然而<embed>元素在当前的浏览器中得到了很好的支持，并且在HTML5中被定义为标准元素，但是你的音频可能由于缺乏浏览器对该文件格式的支持或无法获得插件而无法播放。