HTML5 音频应用
HTML5 让您可以通过兼容的浏览器播放音乐——无需“云”。
最近，亚马逊、谷歌和苹果等大公司的“云”音乐服务受到了媒体的关注。这些服务允许您将音乐存储在公司服务器上，并通过您自己的联网设备随时访问。这些服务的吸引力显而易见。这正是互联网的用途，对吧？
如果您正在阅读这篇文章，您可能是一位 Linux 用户，而且像往常一样，Linux 的支持被这些大型企业解决方案所忽视。例如，苹果的服务依赖于其专有的 iTunes 应用程序，而 Linux 中不存在该应用程序。其他产品具有 Web 界面，但上传仅通过专有的“应用”进行，该应用不适用于 Linux 用户。谁愿意使用专有软件呢？我提到的所有企业产品的文件类型支持也受到限制。我的大部分音乐都存储在 Ogg Vorbis 文件中，而且似乎没有一家大公司服务支持它，尽管缺乏专利。与企业产品相关的还有财务成本（与互联网托管成本相当的显性费用、供应商锁定等等），这些也不具吸引力。
“云”音乐服务还有其他缺点。它们都旨在供个人使用。如果您想与其他人分享音乐怎么办？（我当然指的是合法的音乐分享，涉及具有知识共享型自由许可的文件，或已向词曲作者支付适当版税的翻唱歌曲，通过 Harry Fox Agency 等许可机构支付。）云服务无法帮助您。此外，传输到服务是单向的。除了听音乐之外，一旦您将音乐传输到服务，如果您的个人存储发生任何情况，您就无法轻松地再次下载它。如果您想使用您自己的存储解决方案，例如您自己的个人（且已适当安全保护的）可互联网访问的 Web 服务器怎么办？如果您居住在美国境外，而某些云服务尚未在那里提供怎么办？
所有这些问题都使“云”解决方案更像雾，掩盖了存在另一种方式的事实。现代 HTML5 兼容的 Web 浏览器，如 Chrome、Firefox（Debian 用户的 Iceweasel）和苹果的 Safari 都支持 HTML5 音频元素，这可以使音频文件像图像文件一样易于处理。不需要 Adobe Flash。任何 Web 服务器都可以成为您自己的个人“云”服务器，您可以将其用于个人或商业用途。借助一些自定义的 HTML 和 JavaScript，界面可以成为您想要的任何样子。让我们看看如何实现。
通过浏览器播放音乐典型的浏览器支持多种音频文件类型，无论运行它的操作系统是什么。但是，它们都支持不同的文件类型，并且有一些有趣的意外，最值得注意的是 Firefox/Iceweasel 由于专利和许可问题而不支持 MP3 文件。没关系，因为它支持许多 Linux 用户使用的无专利负担的 Ogg Vorbis 格式。谷歌的 Chrome 也是如此，甚至苹果的 Safari 在安装了 Xiph 的 QuickTime Components 后也可以播放 Ogg Vorbis（请参阅资源）。
让我们试试看。假设您在目录 /home/me/music/ 中有一个名为 test.ogg 的 Ogg Vorbis 文件。您可以使用 URL file:///home/me/music/test.ogg 在基于 Linux 的浏览器（如 Chrome 或 Firefox）中打开它。您的浏览器应该加载该文件并开始播放它。您将在浏览器选项卡/窗口中看到一个播放器，类似于图 1 中所示的播放器。
图 1. Google Chrome 的默认音频播放器控件——其他浏览器具有类似的控件集，但外观不同。
浏览器呈现控件的方式不同，但您会看到所有常用的控件：播放/暂停按钮、位置滑块、当前曲目位置指示器和音量控制。请注意，到目前为止您必须编写多少 HTML 代码：零。如果您真正想做的只是一次播放一个文件，并且您不在乎浏览器窗口中具体显示什么，那么您现在可以停止阅读。
大多数 Web 用户都关心外观，因此仅默认音频控件可能无法满足大多数人的需求。幸运的是，您可以将音频播放器显式地放置在任何 HTML 页面中。这很像向页面添加图像。您不是使用 img 元素，而是使用 audio 元素，并且这两个元素的语法相似。例如，要在使用浏览器的默认控件的空白 HTML 页面中加载和播放 test.ogg，您可以使用以下页面
<html>
<body>
<audio src="test.ogg" controls>Get an HTML5 browser!</audio>
</body>
</html>
请注意，HTML5 简化了根 HTML 元素的语法，这可能与您习惯的不同。“获取 HTML5 浏览器！”消息仅在非 HTML5 浏览器中加载页面时才会出现。其他用户将看到如图 1 所示的播放器元素，这要归功于设置了 controls 属性。默认情况下，音频元素没有控件。（HTML5 允许您设置没有值的属性。如果您更喜欢更像 XML 的东西，您可以将属性设置为自身——例如，controls="controls"。）
修改音频标签以适应一些简单的用例很容易。如果您希望声音剪辑在后台播放且没有控件，您可以省略 controls 属性
<audio src="test.ogg" autoplay>Get an HTML5 browser!</audio>
您可以添加 loop 属性，使音频文件在完成时重新启动
<audio src="test.ogg" autoplay loop>Get an HTML5 browser!</audio>
正如我之前提到的，不同的浏览器支持不同的文件格式，并且它们并不都相同。Ogg Vorbis 适用于 Chrome、Firefox 和 Safari（使用 Xiph 的扩展），但其他浏览器需要其他格式，如 MP3。在撰写本文时，似乎所有浏览器都支持其中一种或另一种，但不一定都支持。您能做些什么来解决这个问题呢？
HTML5 还有另一个名为 source 的元素，它取代了 audio 标签的 src 属性。它位于 audio 元素内部。与 src 属性不同，您可以在一个 audio 标签内拥有多个 source 元素。浏览器将加载它找到的第一个它可以实际使用的 source 元素引用的文件。让我们再次看第一个示例，这次使用 source 属性
<audio controls>
<source src="test.ogg"/>
<source src="test.mp3"/>
Get an HTML5 browser!
</audio>
浏览器将首先尝试读取和播放 test.ogg。如果由于任何原因失败（找不到文件，无法播放该文件类型等等），它将简单地移动到 test.mp3 并改用它。根据需要使用尽可能多的 source 元素，尽管在实践中，两个通常就足够了。
添加自定义用户界面当然，这些简单的示例有其用途。不过，大多数 Web 开发人员宁愿看到比这些示例所能提供的更一致的用户界面。在三个不同的浏览器上出现三个不同的 UI 会极大地影响页面的可用性。对于专业的网站，您需要一个看起来专业的页面。幸运的是，音频元素有一个 JavaScript API，您可以使用它来实时控制播放器。要获得您想要的界面，请使用标准 HTML 技术编写它，并设置事件处理程序以通过 JavaScript 的 API 访问音频播放器。
这是一个简单的例子。以下页面显示一个简单的播放/暂停按钮，而不是本机控件
<html>
<body>
<audio src="test.ogg" id="player" loop>Get an HTML5 browser!</audio>
<form id="interface">
<input type="button" value="Play"
↪onclick="PlayPause()" id="playpause"/>
</form>
<script type="text/javascript">
var audioPlayer = document.getElementById("player");
function PlayPause()
{
if (audioPlayer.paused)
{
audioPlayer.play();
document.getElementById("playpause").value = "Pause";
}
else
{
audioPlayer.pause();
document.getElementById("playpause").value = "Play";
}
}
</script>
</body>
</html>
页面加载后，按“播放”按钮开始循环播放 test.ogg。当用户按下按钮时，浏览器调用音频播放器对象的 play() 函数来开始播放曲目。然后按钮标签变为“暂停”。然后您可以按同一个按钮暂停音频，这将调用音频播放器对象的 pause() 函数来暂停播放。
有许多与音频播放器相关的属性和方法。您可以通过更改 currentTime 属性来更改播放器的当前播放时间。通过更改 volume 属性来更改音量。还有许多其他属性和方法，并非所有这些属性和方法都在撰写本文时的所有浏览器中实现。有关更多信息，请参阅本文的“资源”部分中列出的 W3C HTML5 规范，以及您首选浏览器的文档。
到目前为止，您已经了解了开发 HTML5 音频应用程序的基础知识。您可能想看一个更详细的示例。不幸的是，杂志文章的篇幅有限，而 Web 开发代码占用了很多空间。相反，我想向您推荐一个我编写的名为 Playlist HTML5 Audio Player 的开源项目（请参阅资源）。以下是关于该项目的一些背景信息。
Playlist 的目标是为按顺序播放音频文件集合（如录制音乐专辑）提供用户界面。要使用该界面，您只需要一个音频文件集合和一个文本文件（称为播放列表），其中单独列出了这些文件。如果封面可用，Playlist 也会显示封面。最后两项都不是必需的。图 2 显示了 Playlist 正在播放一些可自由再分发的示例音乐。
图 2. Playlist HTML5 音频播放器正在播放一些可自由再分发的示例音乐
Playlist 支持汽车 CD 播放器上常见的控件，包括随机播放按钮。它将无限循环播放所选播放列表，直到您暂停它。它具有基于 jQuery 的控件和选项卡，这使您可以使用 jQuery 的 Themeroller 工具轻松更改外观。由于 jQuery 的表格排序和重新排序功能，您可以在会话期间以您喜欢的任何方式重新组织“播放列表”选项卡中的曲目顺序。例如，维基百科说，披头士乐队的歌曲“Her Majesty”最初出现在专辑《Abbey Road》中的“Mean Mr. Mustard”和“Polythene Pam”之间。使用 Playlist，您可以将其从专辑末尾拖到另外两首曲目之间，以听到实际听起来是什么样子。Playlist 仅在客户端运行，因此下次您加载《Abbey Road》页面时，“Her Majesty”将再次回到专辑末尾。
您可以通过自己的 Web 服务器在您自己的计算机上将 Playlist 用于您自己的个人音乐收藏。如果您想要完整的“云”体验，您还可以在当今无处不在的 Web 托管服务中的任何一个上使用它。您不需要任何特殊的服务器端工具，如 PHP 或 MySQL，因为 Playlist 不包含任何服务器端代码。您可以通过任何支持您首选音频文件类型的 HTML5 兼容浏览器在本地或远程访问您的音乐。我将 Playlist 用于我自己的音乐收藏，就我的目的而言，它的效果与 Linux 播放器（如 Rhythmbox、Exaile 和 Amarok）一样好，甚至更好。
Playlist 也可用于更商业化的应用。乐队、音乐家和词曲作者通常希望将他们自己作品的录音作为其整体促销策略的一部分进行分发。如果录音是原创音乐，则可以直接使用 Playlist 之类的工具。如果任何歌曲是其他词曲作者作品的重新录制，则必须获得适当的许可，例如 Harry Fox Agency 提供的美国发行机械许可。此类许可的核算必须至少部分在服务器上进行，但您仍然可以使用 Playlist 作为 UI。
安装 Playlist 相当简单。在其最简单的形式中，Playlist HTML5 音频播放器由一系列普通的 Web 文件组成，包括 Playlist.html（一个 HTML5 文件）、Playlist.js（一个 JavaScript 文件）和一系列附件文件，包括图像和 jQuery 主题元素。所有这些文件都包含在一个名为 jsapps 的目录中（可以理解为“JavaScript 应用程序”）。将此文件夹放到可以轻松访问的 Web 服务器上。要播放的内容（当然，它与播放器是分开的）放在您站点的逻辑位置，例如与 jsapps 同一级别的名为 music 的文件夹。
一旦您的音频文件到位，您将需要在同一目录中创建一个名为 Playlist.m3u 的文本文件，其中列出要播放的文件。例如，如果您有两个名为 Track1.ogg 和 Track2.ogg 的曲目，您的文件将如下所示
Track1.ogg
Track2.ogg
您可以使用命令行工具（如 ls）或 GUI 工具（如 Audio Tag Tool）更轻松地创建 Playlist.m3u。
最后，您需要一个文件，该文件将浏览器重定向到 jsapps 目录中的 Playlist.html，以及引用播放列表文件的查询参数。为了您的方便，jsapps/playlist 目录中有一个名为 redirect.html 的文件，它将通过 JavaScript 完成这项工作。将该文件复制或链接到您音乐的目录中，与 Playlist.m3u 放在一起。我经常将重定向文件命名为 index.html。如果需要，添加封面（Cover.jpg）和 HTML 格式的其他信息（About.xml）。您就完成了。浏览到重定向文件，看看会发生什么。
我在我自己的网站上设置了 Playlist，以便您可以轻松尝试它（请参阅资源）。要在您自己的机器上尝试 Playlist，请从 SourceForge 上的项目主页下载它（请参阅资源）。我已将其打包在 Jetty 的一个版本中，Jetty 是一个基于 Java 的开源 Web 服务器，可以在任何具有 Java 运行时环境的平台上运行。我添加 Jetty 是为了方便起见，但您不需要使用它。您可以从项目页面使用 Git 下载源代码，也可以获取包含 Jetty 的完整下载，并将 music 和 jsapps 目录从 Jetty 的 webapps 目录复制到您自己的 Web 服务器上的适当位置。如果您想使用 Jetty，请运行 start.sh（或 Windows 中的 start.bat）以启动服务器，然后通过端口 8080 浏览到它（例如，http://localhost:8080/music）。所有这些测试用例都将导致可自由再分发的示例音乐播放，这将使您了解 Playlist 的功能。
HTML5 是通过互联网收听音频的强大工具，与“云”服务提供的任何工具一样强大，并且更加通用。将音频编码到 HTML5 页面中非常简单。如果您对编写 HTML 不感兴趣，并且正在寻找打包的解决方案，请尝试我的开源 Playlist HTML5 音频播放器。
最后，我想以一个警告结束。HTML5 的强大功能带来了巨大的责任——首先是对您自己。我们都听说过与版权侵权和文件共享相关的诉讼和逮捕事件。您不想成为其中的一部分。
为了保护自己，请负责任地使用 HTML5 音频。不要将非自由音乐放在任何 Web 服务器上公开访问或可被搜索引擎抓取的位置。防火墙、SSL 证书、Web 服务器配置文件（包括 Apache 的 htaccess 和 norobots.txt）、用户身份验证和其他常识性的服务器端策略可以帮助您随时随地欣赏您的音频，同时保持您的私人音乐收藏的私密性。如果您合法分发音乐，请确保您拥有所有适当的权利和许可，包括机械许可和其他许可。
资源通用 HTML5：http://www.w3.org/TR/html5
HTML5 的音频元素详解：http://www.w3.org/TR/html5/the-iframe-element.html#the-audio-element
Xiph.org 的 QuickTime Components：http://www.xiph.org/quicktime
Playlist HTML5 音频播放器：https://sourceforge.net/projects/playlistplayer
JQuery：https://jqueryjs.cn
Playlist 示例，从我自己的网站提供，播放具有免费许可的音乐：http://paulfreitas.com/jsapps/playlist/Playlist.html?/music/Brad%20Sucks/I%20Don't%20Know%20What%20I'm%20Doing/Playlist.m3u
Harry Fox Agency 网站（用于获取“翻唱音乐”机械许可）：http://www.harryfox.com
