由于我们本月正在举办 HTML5 音频开发者比赛，我想再次尝试一下音频。结果令人沮丧的是，我发现它相当令人沮丧。

我在很多演讲中都提出了一个建议，就是使用 CSS 精灵 的理念并将其应用于 HTML5 音频。您将获得相同的好处 - 在一个 HTTP 请求中加载一个文件而不是多个文件，避免由于文件可能无法加载而导致的失败等等。

为了测试这一点，我使用很棒的 Kraftwerk 的 Music Non Stop 编写了 以下小型演示。

点击不同的按钮应该只播放音乐文件的一部分。在我的电脑上的 Firefox、Chrome 和 Opera 中，这运行良好。但是，Safari 无法预加载音频，并且当前时间设置不正确。代码非常简单，因此应该可以正常工作。

// get the audio element and the buttons container
// define a sprite object with the names and the start and end times
// of the different sounds.
var a = document.querySelector('audio'),
    buttoncontainer = document.querySelector('#buttons'),
    audiosprite = {
      'all': [ 0, 5 ],
      'boing': [ 0, 1.3 ],
      'boomtchack': [ 2, 2.5 ],
      'peng': [ 4, 5 ]
    },
    end = 0;

// when the audio data is loaded, create the buttons
// this way non-HTML5 browsers don't get any buttons
a.addEventListener('loadeddata', function(ev) {
  for (var i in audiosprite) {
    buttoncontainer.innerHTML += '' + i + '';
  }
}, false);

// If the time of the file playing is updated, compare it
// to the current end time and stop playing when this one
// is reached
a.addEventListener('timeupdate', function(ev) {
  if (a.currentTime > end) {
    a.pause();
  }
},false);

// Play the current audio sprite by setting the currentTime
function play(sound) {
  if ( audiosprite[sound] ) {
    a.currentTime = audiosprite[sound][0];
    end = audiosprite[sound][1];
    a.play();
  }
}

现在，这并不是什么新鲜事，Remy Sharp 在 2010 年写过关于音频精灵的文章，并尤其对 iOS 中存在错误的支持表示遗憾（音频根本不会加载，直到您通过触摸激活它 - 这听起来非常像 Flash 在 IE 上的“点击激活”）。

其他问题包括 HTML5 音频的循环和延迟。正如 Robert O’Callahan 所报告的，通过在播放音频元素之前克隆它可以解决此问题（以及一个 令人难以置信地恼人的测试），并且此修复程序已被 用于 Gladius HTML5 游戏引擎。

总而言之，HTML5 音频似乎仍然需要大量的工作，这就是为什么最近在 HTML5 旗帜下发布的许多游戏都使用 Flash 音频或根本不使用音频的原因。这令人遗憾，需要解决。

有趣的是，有一些很棒的项目您可以参与其中。例如，Soundcloud 等人开发的 Are we playing yet? 是一个浏览器音频支持测试套件。您可以在 GitHub 上编写自己的测试 并将结果报告给浏览器制造商。

jPlayer 团队有一个很棒的 HTML5 媒体事件检查器，显示您当前浏览器支持多少 HTML5 媒体事件。

如果您想确保安全，您可以使用 Scott Schiller 开发的 SoundManager 2 来获得一个 API，该 API 在可能的情况下使用 HTML5，并在浏览器不支持时回退到 Flash。它还可以为您解决一些问题。

说到 Scott Schiller，他不断地对音频状态提供很好的见解。他关于 24 种方法的文章“可能、也许、否：HTML5 音频的状态”有一个 51 分钟的视频。

还可以观看 关于同一主题的较短且更新的演讲。

总而言之，我想听听您对 HTML5 音频状态的看法。

• 宣称 HTML5 是插件终结的那些公司是否掉链子了？
• 当您询问浏览器是否可以播放某种类型的媒体时，返回 可能或也许或“” 的 API 真的明智吗？
• 如何解决这些问题？

让我们重新开始关于 HTML5 音频的讨论，毕竟我们需要它来构建 浏览器中的消息传递 和电话功能的未来。

哦，还有一件事。当然，还有 Firefox 的 音频数据 API 以及 Webkit 提供的 Web 音频提案，但在移动设备上运行这些将是一个更大的变化。如果您想了解更多关于这些内容以及解决其差异的库的信息，Happyworm 上有一篇很棒的 概述文章。