实现 HTML5 音频标记的快速指南

欧内斯特·德尔加多
欧内斯特·德尔加多
X

第 1 步：使用音频标记封装 Flash 对象

这些不能识别音频标记的浏览器会改为加载 Flash 内容。

<audio>
</span><span class="old">
    <object class="playerpreview" type="application/x-shockwave-flash"
            data="player_mp3_mini.swf" width="200" height="20">
      <param name="movie" value="player_mp3_mini.swf" />
      <param name="bgcolor" value="#085c68" />
      <param name="FlashVars" value="mp3=test.mp3" />
      <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
             height="20" name="movie" align=""
             type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
      </embed>
    </object>
</span><span class="new">
</audio>

第 2 步：添加源引用

我们可以添加任意数量的“源”行和格式。如果浏览器不支持某种特定格式，就会回退到下一种格式，依此类推。

<span class="old"><audio></span>
  <span class="new"><source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" /></span><span class="old">

  <object class="playerpreview" type="application/x-shockwave-flash"
          data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#085c68" />
    <param name="FlashVars" value="mp3=test.mp3" />
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
           height="20" name="movie" align=""
           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
    </embed>
  </object>

</audio></span>

第 3 步：添加 Flash 后备

为了安全起见，我们需要添加 Flash 音频播放器的后备值，以防浏览器不支持我们指定的任何格式。例如，Firefox 3.5 仅支持 Ogg 格式的音频标记，但我们可能只有 mp3 文件。

<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">

<object class="playerpreview" type="application/x-shockwave-flash"
        data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
        height="20" name="movie" align=""
        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>

</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
    swfobject.embedSWF(
    "player_mp3_mini.swf",
    "player_fallback",
    "200",
    "20",
    "9.0.0",
    "",
    {"mp3":"test.mp3"},
    {"bgcolor":"#085c68"});
}
}
</script></span>

为方便起见，我们使用SWFObject库通过 JavaScript 插入 Flash 播放器。要添加该库，只需使用 Google AJAX Libraries API 在您的标头中插入以下两行代码即可：

<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>

第 4 步：添加默认控件以显示播放器

这些控件是不可自定义的（请参见最后的示例）。无论系统支持的格式如何，这些默认控件都会显示，因此我们需要使用之前创建的条件来处理其可见性。

// TODO: DevSite - Code sample removed as it used inline event handlers

或者，您也可以使用 JavaScript 和 CSS 创建自己的播放器。

// TODO: DevSite - Code sample removed as it used inline event handlers