作者：上周，我们介绍了来自 Alistair MacDonald (@F1LT3R) 的一个演示，他展示了如何 使用 Canvas 动画 SVG 以及一些免费工具。本周，他又为我们带来了另一个演示，展示了如何使用 Firefox 3.5 中新的 音频元素，结合一些 Canvas 和 JS，构建一个美观的音频播放器。
但这个演示真正有趣的地方不在于它播放音频——很多人已经构建了音频播放器——而在于它的工作原理。如果你查看页面的源代码，你会发现它看起来像这样
（实际列表包含回退机制，并且更紧凑——此处为了易于阅读进行了清理。）
没错——上面的播放器只是一个简单的 HTML 无序列表，碰巧包含音频元素，并使用 CSS 进行样式设置。你会注意到，如果你右键点击其中一个元素，它会显示所有常用的选项——另存为、将此链接添加书签、复制此链接位置等。你甚至可以用 Firebug 检查它。
Al 编写的 JavaScript 驱动程序会查找具有 <div> 元素 ID 为 jai 的元素，然后查找其内部的所有音频元素。然后，它将在列表顶部的画布中绘制播放界面。播放界面使用简单的 JS 画布调用和 SVG 派生字体构建。
使用此驱动程序，只需定义一个画布和一个列表，就可以非常轻松地将音频播放器添加到任何网站。就像我们在网络上广泛使用 jQuery 等实用库时看到的那样，此库可以为易于定义的标记添加额外的价值。HTML5 和库模型的又一次胜利。
Al 在与演示相同的页面上写了一篇更 详细的文章。如果你还没有阅读，现在就应该读一下。
（还有？Al 自己创作了音乐。太棒了。）
关于 Christopher Blizzard
一次发布，让网络更美好。
33 条评论