项目的 Demo 在 http://juy.fm 。
好久没更新了,其实编码并未中断,虽然进度是慢了些。主要原因是这几天的代码之前都写过,只是做了些整理和微调。我把核心步骤再复现一遍:
- 下载 turn.js 插件放在项目的 client/lib 文件夹中。阅读 turn.js 的文档,了解其中最基础的几个方法。
- turn.js 的实现中有一个部分需要理解清楚,不管这本书有多少页,它最多只会保存 6 页的 DOM 元素。所以在本项目中,除了前后封面以及开篇介绍页外,其余具体的歌曲页都是通过 $.turn('addPage', function() { ... }) 动态加入的。
- 另一块需要系统了解的知识是对 audio 对象的操作,如 play、pause 方法等,以及它的状态值 readyState 为不同值时对应的播放器的状态。
- 调节音量大小的 slider 我直接选择了 bootstrap-slider 模块。
- 对了,还有一个辅助工具:IcoMoons 提供的 Web Font,利用到 CSS 的 @font-face 特性。我根据自己的需求选取了一些免费图标自定义了一个字体。Web Font 在我看来最大的几个好处是:体积小、一次加载、可以使用 CSS 调节大小和颜色。
- 集齐了上述所有这些工具后,就可以一步步搭建 pAlbum 这本乐辑书了。结构部分就是按照需求一类页面对应一个模板;然后再丰富样式;至于 JavaScript 的交互,主要就是处理动态加新页面以及翻页的逻辑。还有一块是尝试对 Audio player 采用状态模式来管理,目前只是用传统的创建类和对象的方式来实现状态模式,下回会考虑结合 JavaScript 的语言特性对已实现的状态模式进行优化。
Github 地址:这次更新内容有点多...
干巴巴地讲了这么多回,上个目前已有的封面图吧: