HTML 基础
HTML 高级教程
HTML5 特征
HTML5 示例
HTML5 参考手册

HTML5 音频

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

在 HTML 文档中嵌入音频

以前在网页上插入音频并不容易,因为网络浏览器没有统一的标准来定义像音频这样的嵌入式媒体文件。

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

使用 HTML5 音频元素

新引入的 HTML5 <audio> 元素提供了一种在网页中嵌入音频的标准方法。 然而,音频元素相对较新,但它适用于大多数现代网络浏览器。

以下示例使用浏览器默认控件集简单地将音频插入 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">
    Your browser does not support the HTML5 Audio element.
</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 动画甚至图像。

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

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

警告: <object> 元素不受广泛支持,很大程度上取决于嵌入对象的类型。 在许多情况下,其他方法(如 HTML5 <audio> 元素或第三方 HTML5 音频播放器)可能是更好的选择。


使用嵌入元素

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

以下代码片段将音频文件嵌入到网页中。

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

警告: 但是,<embed> 元素在当前浏览器中得到了很好的支持,并且在 HTML5 中被定义为标准,但由于浏览器不支持该文件格式或插件不可用,您的音频可能无法播放。

Advertisements