HTML5 Audio-使用 HTML5 向网页中添加音频播放器

星期六 2013/04/06 22:22 阅读：15668 评论：1 作者：ivan 分类：HTML、Web前端

通过使用 HTML5，无需任何第三方插件或外接程序，你就可以向你的网页添加音乐播放器。

你可以使用以下主题中的信息向自己的网页添加类似于 Internet Explorer Test Drive HTML5 Audio Player + XML Playlist 的音频播放器。

本系列内容

HTML5 audio 元素入门：你可使用 audio 元素向你的网页中添加基本音频播放器，而无需脚本或加载项控件。
使用 JavaScript 控制 Audio 对象：HTML5 中的 audio 对象提供可用于通过 JavaScript 控制播放的方法、属性以及事件。
使用 Media 事件添加进度栏：media 提供 audio 对象可以使用的一系列丰富事件。可利用一组事件来获取可用于在播放音频文件时跟踪进度的状态数据。
支持多个音频文件格式：通过使用 audio 元素或对象支持多个音频格式，你可以将更多的听众从多个浏览器吸引到你的网页上。

<audio> 元素简介

HTML5 audio 元素提供一个可编写脚本的对象，无需外接程序或插件即可播放音频文件。简单地说，使用单个标签和一组属性在网页上为用户提供播放器。通过使用 JavaScript，你可以管理 audio 对象和分配事件，以提供全方位的控制和状态跟踪。

HTML5 audio 元素与 HTML5 video 元素共享媒体属性和方法，所以你可能发现你用于监视进度、文件加载或播放和查找等项目的代码都是可以彼此互换的。除了方法和属性之外，与大多数 JavaScript 对象一样，有许多可以进行注册的事件，可以简化你的代码。有关这些事件的详细信息，请参阅本节后面的主题。

播放音频和视频内容

从 Windows Internet Explorer 9 开始，任何音频或视频内容都需要在服务器上设置正确的 mime 类型，否则将不能播放文件。Internet Explorer 9 支持 MP3 音频和 MP4 音频和视频。可以通过安装 WebM 项目中的 WebM 组件来支持 WebM 音频和视频文件。下表介绍 Web 服务器正确托管这些文件所需的设置。

要处理的媒体文件	扩展设置	Mime 类型设置
音频 mp3	mp3	音频/mpeg
音频 mp4	m4a	音频/mp4
音频 WebM	webm	音频/webm
视频 mp4	mp4	视频/mp4
视频 webm	webm	视频/webm

HTML5 audio 元素入门

你可使用 audio 元素向你的网页中添加基本音频播放器，而无需脚本或加载项控件。

最简单的音频播放

向网页中添加音频的主要方法是使用 audio 元素。与大部分新的 HTML5 支持一样，如果用户的浏览器不支持 HTML5 audio 元素（旧的浏览器会出现此情况），则 audio 元素允许你使用错误消息或其他播放技术进行回滚。你可以在 audio 标记之间放置一个错误消息，如以下示例所示，或者可以插入外部播放器控件的代码，例如 Silverlight 浏览器插件。以下代码示例显示了播放音频文件的简单网页。

<!doctype html>

<html>

<head>

<title>Audio Element Sample</title>

</head>

<body>

<h1>Audio Element Sample</h1>

HTML5 audio not supported

</audio>

</body>

</html>

将 audio 元素直接添加到 HTML 代码中，这将使用 src 属性指定要播放的音频文件，并使用 controls 特性以使用内置的播放器控件。如果你使用的是浏览器的内部播放器，则无需其他脚本。各个浏览器中的内部播放器可能会在样式或功能上有所不同。

在 Windows Internet Explorer 9 中， audio 元素将显示一个简单播放器，其中包含基本的播放、暂停、位置滑块和音量控制。该播放器还显示文件的播放时间和剩余时间。如果你将鼠标指针悬停在时间显示上，则可快进或快退 30 秒。

Internet Explorer 9 中的 audio 元素支持两个其他特性： autoplay 和 loop。 autoplay 告诉 Windows Internet Explorer 在加载 audio 对象后立即加载并播放音频文件。这与使用 bgsound HTML 元素相似。与 bgsound 不同的是， pause 和 play 控制让网页用户关闭声音。 loop 特性会从头开始连续重新播放声音文件。如果你不需要任何内部控件，则不要使用这些特性。

在该示例中，文件 “demo.mp3” 是你自己的文件的占位符。如果音频文件位于网页的源代码所在的同一目录，则只需指定文件名即可。如果音频文件位于其他目录中，请包括路径，例如，”music\demo.mp3″。如果文件位于其他站点上，则使用完全限定的域名和路径，如 “http:\\www.contoso.com\music\demo.mp3″。

虽然可单独在 HTML 中实现 audio 元素，但是使用脚本，你可以通过使用自己的按钮、创建播放列表或添加播放状态来改进你的网页。

注意如果你是在 Intranet 上进行开发并且有 HTML5 的呈现问题，则可以向网页的 <head> 块中添加 <meta http-equiv-“X-UA-Compatible” content=”IE=9”/> 以强制 Internet Explorer 9 使用最新标准。如果愿意，可以将 Web 开发服务器配置为发送带 IE=9 的元 http-equiv-“X-UA-Compatible” 标头。