Hunger Music 项目介绍

标题：

Hunger FM 项目

功能介绍：

** Hunger FM是一个Web的电台（专辑）音乐播放器 **

• 滑动专辑栏

1. 点击图片选择专辑
2. 位于下方的专辑栏轮播滑动效果

• 音乐播放控制显示

1. 选择专辑后自动播放并加载歌曲图片
   2.音乐播放器基本功能（播放暂停、下一曲、进度显示）
2. 点击进度能够调整歌曲进度
3. 实现了歌词同步播放功能

技术细节介绍：

• 响应式布局

1. 高度撑满，对页面进行单位换算 使用单位 vh 实现自动等比的缩放（即使不同屏高度不同，同样撑满，然后其他因为使用vh自动等比缩放）
2. 宽度加了一点响应式

• JS功能组合与分离

1. JS文件主要编写了 专辑栏功能函数对象footer 和 播放器功能函数对象Main，二者实现各自功能，耦合程度极低；
2. 封装了一个时间发布订阅函数对象EventCenter（事件中心），使专辑栏和播放器之间产生关联，专辑栏footer只负责监听用户的频道选择，通过EventCenter.fire发布相关专辑被选择消息；Main只通过EventCenter.on订阅监听EventCenter.fire发布的相关消息，并做出相应的响应。

• 歌词的同步加载以及动画展示

1. 实现了一个jQuery插件$.fn.slipText，引用了animate.css，对歌词进行了动画效果的包装；
2. 获取到当前播放歌曲的歌词数据并进行分隔处理（提取歌词时间部分）之后生成lyricObj对象，对象中的键是时间，值是时间对应的歌词
3. 用音乐播放时的时间跟歌词对象中的键进行配对，实现同步展示歌词，并调用jQuery插件进行歌词的酷炫展示

遇到的问题

1. 从服务器获取数据受限：需在head里加上<meta name="referrer" content="never">
2. 菜单栏切换点击过快会出错：添加一个状态属性this.isAnimate执行切换前先判断是否正在切换滑动菜单栏，如果是则return掉，如果不是则执行切换并且把状态属性this.isAnimate设置为ture，执行完切换之后再设置为false，避免过快点击菜单栏切换导致出错
3. 改变窗口大小之后，菜单栏滑动长度不匹配出错：监听窗口大小改变事件window.onresize，当窗口大小改变时，对一些关键参数进行更新，比如：专辑容器 ul 的width，避免判断是否到达开始和结尾的判断式出错

项目收获

• 初步认识并熟悉了响应式布局的编写
• 对JS 的函数封装、模块化、功能分离、代码复用和设计模式等概念有了进一步的了解
• 进一步熟悉了静态页面和JS 文件的代码编写

技术栈关键字

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