颠覆网络35天 ─ HTML5范儿的音频播放器

原文地址：audio player - HTML5 style
系列地址：颠覆网络35天

====================================

上周Alistair MacDonald（@F1LT3R）给我们带来过一个示例，向我们展示了如何使用Canvas制作动画SVG和很多免费的工具。这周他同样给我们带来了一个示例，向我们展示如何使用全新的Firefox 3.5 audio元素和一些Canvas和JavaScript来构建一个非常好看的音频播放器。

这个演示最有趣的地方并不是他如何能够播放音频──好多人都做过音频播放器──而是他展示了是怎么做到的。如果查看演示页面的代码，您会找到类似这样的代码：


<div id=“jai”>
  <canvas id=“jai-transport” width=“320″ height=“20″></canvas>
  <ul class=“playlist”>
    <li>
      <a href=“@F1LT3R - Cryogenic Unrest.ogg”>
        F1LT3R - Cryogenic Unrest
      </a>
      <audio src=“@F1LT3R - Cryogenic Unrest.ogg”/>.
    <li>
      <a href=“@F1LT3R - Ghosts in HyperSpace.ogg”>
        F1LT3R - Ghosts in HyperSpace
      </a>
      <audio src=“@F1LT3R - Ghosts in HyperSpace.ogg”/>.
  </ul>
</div>
（实际的列表更紧凑一些──这里为了阅读清楚作了一些格式调整）

你看到的不错，上面的播放器完全是使用简单的HTML构建的，包括歌曲列表、audio元素，并且都使用CSS定义好风格。。完完全全的HTML～

JavaScript脚本会去找到页面中的带有jai为ID的<div>元素，然后找到在这里包括的audio元素。找到之后就会在Canvas上画出播放器的样子。上面的播放器完全使用Canvas画出和SVG定义的字体。

使用这套东西可以非常容易的在任何网页中添加音频播放器。这套东西和我们平时看到的jQuery等类库非常像，库本身还可以添加额外的标记等。

Al在演示的页面中也写了很多说明性的文字。所以，如果您感兴趣的话，可以好好看看。

（而且，这些音乐都是Al自己写的，真是太牛了～）

Post a comment | Trackback URI