经过两个周末的开发，每周歌词播放器终于完工了。这个项目算是我对自己前后端技术的小实践，在编写过程中，我也发现了不少问题。
起
项目最先的灵感，大概是…… 无聊？这个项目是暑假之初开的坑，当时用了 1 个小时左右简单开发了后端的内容提供。当然你也知道这个项目的后端，是非常简单的。
后端
包括后来补上的几个接口，拢共就这几个：
- 提供歌曲信息
- 添加歌曲接口
- 删除歌曲接口
- 编辑歌曲接口
- 获取 lrc 接口
其实这么多接口开发可以更快，只是中途添加修改功能耗费时间。当然外链播放器也是靠后端查询提供信息的（不像网易的外链是靠前端解析 url 的）。返回采用 json，方便前端处理。
前端
每周歌词播放器界面
因为个人还是挺喜欢 Material Design，所以采用了前端框架 Materialize。
外链播放器
示例：
当然也支持歌词：
因为偷懒所以用了 APlayer…… 作者 dalao 的博客请戳友链 “Anotherhome”。不过以后可能会自己开坑。另外播放完成也有提示（给 “每周歌词” 系列宣传～）。
外链格式：kaaass.net/weeklyrics/outchain/sid (我是 sid)/
网页播放器
使用一个 audio 标签进行播放的控制。
好像都没啥好说的，主要就是歌词。然而歌词是 DIYGod dalao 的代码……
就是首先使用正则解析每句歌词的时间为数组，然后将歌词添加到歌词 div 中。当检测到播放进度进行到某句歌词，就给歌词 div 一个向上的动画。大致思路也就是这样。
菜单
这就是菜单了～菜单项目是从 API 获取的，并进行解析。似乎也没啥好说的，因为整个东西本身就不是什么高端程序啊 233333
未完待续
评论