多媒体音频控制器下载

HTML5多媒体组件（音频的使用）

主要讲解了有关用HTML5在网页中嵌入视频的内容。当然，大部分视频中包含了音频，所以

如果你想把音频文件嵌入到你的网页中，同样用HTML5能够很容易地实现。

AD：

范例文件：(125KB)

在这个使用HTML5组件工作三部曲的HTML5多媒体组件（视频的使用）中，我主要讲解

了有关用HTML5在网页中嵌入视频的内容。当然，大部分视频中包含了音频，所以如果你想

把音频文件嵌入到你的网页中，同样用HTML5能够很容易地实现。

在这篇教程中，我会讲解audio元素，它的属性，以及HTML5能够使用的不同类型的音频文件。

许多在第一部分中提及的视频概念和技术，同样适用于音频。所以如果你已经阅读过第一部分，

你会注意到在第二部分中有一些相似之处。如果你还没有读过第一部分，并且你只对HTML5

音频感兴趣，那么这篇文章有你启程所需要的全部知识。

注意:你可以通过下载和深入研究该示例文件，来研究一些示例代码和文章中所阐述的许多概

念。

提供音频文件的支持：两种技术的快速对比

在HTML5出现前，如果你想要在你的网页中嵌入音频文件，必须使用第三方插件，比如Flash

Player。

例如，要在你的网页中嵌入一个MP3音频文件，并使它可通过FlashPlayer使用。你或许要用

到以下的代码：

objecttype=applicationx-shockwave-flashdata=?audioURL=3

autoPlay=trueheight=27width=320paramname=movievalue=

?audioUrl=3autoPlay=trueobject

audiosrc=3controlsautoplayaudio

这些HTML5代码片段和那些为FlashPlayer提供的更加冗长的代码实现了相同的结果：在网页

中嵌入一个能自动播放的音频文件。你可以看到HTML5代码有多么的简单整洁。

音频编解码器

在该系列的第一部分中我谈到了视频编解码器。那同样要介绍许多音频编解码器的思想也不足

为奇了。HTML5规范最初台湾高山茶也为OggVorbis编解码器受托者提供支持，

但来自苹果和诺基亚的挑战使其终止了该支持。如今的浏览器，相比于支持视频编解码器而言，

能支持更多的音频编解码器，所以当你抉择于该使用哪种音频编解码器时，你会有更多的选择：

火狐支持OggVorbis和WAV.

Safari支持MP3,AAC,WAV,以及MP4.

InternetExplorer9支持MP3,AAC,和MP4.

Opera支持OggVorbis和WAV.

Chrome支持以上所有格式.

要覆盖所有支持HTML5音频的浏览器玛瑙，你只能用两种不同的格式服务你的音频：

OggVorbis和MP3。

由于WAV文件格式不能压缩得很好因此文件大小会相当大，不建议使用该格式。

正如你所见，audio元素用作在网页中嵌入音频文件。像video元素一样，它有许多的属性，表

1中列出了其中的部分属性：

表元素属性

例如，利用audio元素和它的属性，你可以使用以下代码来嵌入一个MP3音频文件，该文件可

在加载时开始播放，拥有默认的控制设置，并能反复循环播放。

audiosrc=3autoplaycontrolsloopaudio

我必须指出，你的用户可能会相当讨厌该示例。自动播放一个循环音频文件通常被认作是恶劣

的因特网规范。

就像我先前提醒的，你需要为音频文件提供至少两种不同的解码器才能覆盖所有支持HTML5

的浏览器。如同对视频元素的处理一样，你需要使用source元素来实现该功能。

一个audio元素能包含多种source元素，因此你能为你的音频提供多种格式支持。扩展先前的

示例，你可以像下面这样为相同的音频内容指定两种source,OggVorbis和MP3。

audioautoplaycontrolssourcesrc=e=audiooggsourcesrc=3

type=audiomp3audio

当浏览器解析音频元素时，它将通过source元素列表循序地查找直到找到一个它能播放的文件

格式。一旦找到后，就播放该文件并忽略随后的其它元素。

既然如此，Firefox和Opera会播放Ogg文件。Chrome也会播放Ogg文件,即使它也能播

放MP3文件。Safari和InternetExplorer9会播放MP3文件。

指定编解码器

你也可以指定用来编码音频文件的确切的解码器。这能帮助浏览器决定它是否能播放该内容。

由于你常常不知道究竟用什么解码器，只简单地提供类型并让浏览器自己做决定，通常是一个

更好的主意。

如果你想引用某解码器，你可以照下面这样做：

audioautoplaycontrolssourcesrc=e='audioogg;codec=vorbis'audio

注意解码器是如何添加到type属性中去的，特别要注意用到的引号，以及type和codec之间用

分号隔开了。像指定视频解码器那样，这里很容易犯下会使音频不播放的格式化错误。因此，

如果你要明确地指定解码器，一定要注意语法问题。

并不是每个人都使用支持HTML5的浏览器。例如，InternetExplorer的老版本（IE8或者更低）

仍然相当流行。

为了支持正在用这些浏览器的用户，你需要使用一个第三方插件比如FlashPlayer来嵌入音频文

件。正如在HTML5和本地多媒体到来前你需要做的那样。

浏览器会无视它们不理解的信息，所以你的HTML5音频和source元素会被例如IE8这样的旧

版浏览器完全忽略。举例来说，你可能会使用以下代码来给音频文件添加链接：

audioautoplaycontrolssourcesrc=e=audiooggsourcesrc=3

type=audiomp3ahref=3Downloadtheaudiofileaaudio

旧版浏览器会简单的显示Downloadtheaudiofile链接，而忽视其它内容。

要通过FlashPlayer添加fallback支持（和添加下载链接一样），你需要使用以下代码：

audioautoplaycontrolssourcesrc=e=audiooggsourcesrc=3

type=audiomp3objecttype=applicationx-shockwave-flashdata=

?audioUrl=3autoPlay=trueparamname=movievalue=

?audioUrl=3autoPlay=trueobjectahref=3

Downloadtheaudiofileaaudio

旧版浏览器会显示FlashPlayer和下载链接，因此用户可以选择怎样访问音频。如果用户没有安

装Flashplayer，他们仍然可以通过下载链接访问到你的音频。注意，你可以使用与FlashPlayer

相同的MP3音频文件，因为它完全有能力播放MP3文件。

正如我在第一部分中提醒的，HTML5当前不支持数字版权管理（DRM）。因此，如果你不想让

用户下载你的音频文件，那么对你而言，或许HTML5音频不是一个正确的解决方案。HTML5

会暴露你的音频文件链接，所以它们是公开地提供给用户访问的内容。

目前还没有方法阻止用户下载HTML5音频内容，虽然将来可能会有这样的方法。要获得更多

有关HTML5和DRM的信息，请参阅W3CsHTMLFAQsonthistopic。（这是一个有关HTML5

视频的讨论，但其概念同样适用于音频内容）。

如你所见，使用HTML5在你的网站中加入音频是很简单的。你确实需要意识到一些浏览器是

不支持HTML5的，因此一定要提供一个备用机制，以确保所有用户都可以访问到你的音频内

容。

同样记牢，任何你通过HTML5服务的音频文件也能被任何人下载使用。因此，如果你想避免

你的文件被下载及分享，那么HTML5音频并不适合你。

【编辑推荐】

Linux环境下C编程指南

本书系统地介绍了在Linux平台下用C语言进行程序开发的过程，通过列举大量的程序实例，

使读者很快掌握在Linux平台下进行C程序开发