项目名称： 狗蛋音乐电台

项目功能介绍：

---

• 实现了音乐播放器的基本功能（播放/暂停、下一曲、进度显示）；
• 加载不同歌词时候会切换不同背景图片，并且显示歌曲对应信息（歌名、作者、频道等信息），显示在线听众、收藏量和点赞数；
• 实现了歌词同步播放功能；
• 点击进度条能够跳转到歌曲的对应进度，进度条和时刻及歌词能同时对应；
• 实现了本地收藏功能；
• 点击下方频道拦能够切换到不同的歌单列表；

技术细节

---

1. 响应式布局

页面布局均以显示器高度单位vh为基准，在任何尺寸下，页面高度都能刚好撑满整个窗口。水平方向上则选取了几个典型尺寸，进行媒体查询。

2.项目实现播放交互实现

• 菜单栏功能函数对象Footer与播放器功能函数对象App，二者分别实现各自的功能,两者不进行直接的交互，而通过事件中心进行交互。
• JS封装了一个事件发布监听函数对象EventCenter，使二者之间产生关联：Footer只负责监听用户的频道选择，并通过EventCenter.fire发布相关信息；App只通过EventCenter.on监听EventCenter.fire发布的相关信息，并做相应的加载。

3. 歌词同步加载

获取到当前播放歌曲的歌词数据后，遍历里面的数据，使用正则表达式提取里面的时间和歌词数据，并把它们拼装成key：value 的形式。在后面歌词加载的时候引用JQuery插件给歌词加上酷炫效果。

遇到的问题

• 从服务器获取数据受限：需在head里加上<meta name="referrer" content="never">
• footer下一页建点击过快会出错，为切换效果加一个定时器。检查动画是否播放完成，每个动画完成才进行下个动画，动画完成后还要上锁。

项目收获

---

• 初步熟悉响应式布局的编写
• 学会将js功能分区块，各部功能按初始化，获得数据，拼装数据，渲染数据等模块封装起来。
• 两个模块功能交互的时候，使用事件发布器将两个区块功能进行交互，减低耦合度。

技术栈关键字

---

• jQuery
• CSS3 动画
• 响应式布局