HTML5 音频

在网页上播放声音的方法有很多种。

在 HTML 文档中嵌入音频

将声音插入网页并不容易，因为浏览器没有统一的标准来定义嵌入的媒体文件。

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

使用 HTML5 音频元素

新推出的 HTML5 <audio> 元素提供了一种在网页中嵌入音频的标准方法。但是，音频元素相对较新，但它适用于大多数现代 Web 浏览器。以下示例仅使用浏览器默认控件集将音频插入 HTML5 文档，并使用一个源。

<audio controls="controls" src="birds.mp3">
    Your browser does not support the HTML5 Audio element.
</audio>

使用浏览器默认控件集的音频和其他来源。

<audio controls="controls">
    <source src="birds.mp3" type="audio/mpeg">
    <source src="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="sea.mp3">Track 1</a>
<a href="wind.mp3">Track 2</a>

使用 object 元素

<object> 元素用于将不同类型的媒体文件嵌入到 HTML 文档中。最初，此元素用于插入 ActiveX 控件，但根据规范，对象可以是任何媒体对象，如视频、音频、Java 小程序、ActiveX、文档（HTML、PDF、Word 等）、Flash 动画或甚至图像。这是一个例子：

<object data="sea.mp3" width="200px" height="50px"></object>
<object data="sea.ogg" width="200px" height="50px"></object>

警告： <object> 元素不受广泛支持，并且在很大程度上取决于要嵌入的对象的类型。在许多情况下，HTML5 <audio> 元素或 Google MP3 播放器等其他方法可能是更好的选择。

使用嵌入元素

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

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

<embed src="wind.mp3" width="200px" height="50px">
<embed src="wind.ogg" width="200px" height="50px">

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