基本演示效果图如下
QQmusic.gif
整体步骤如下:
1.搭建界⾯
2.修改⾯面的⼀一些内容
- 添加毛玻璃效果
- 将专辑图片添加圆⾓
- 设置slider的滑块的图⽚
- 状态栏的改变
3.封装了工具类(Music数据⼯工具)
- 返回所有的数据
- 设置当前播放的歌曲的方法
- 返回当前播放歌曲
- 获取下一首歌曲
- 获取上一首歌曲
4.开始播放⾳乐
- 基本界面的设置
- 设置当前时间和总时间(AVAudioPlayer)
- 开始⾳乐—>专辑图片添加动画
- 随着时间改变slider的进度和当前播放时间的Label的⽂字
5.对滑块的事件处理
- touchDown—>移除定时器
- touchUpInside—>改变歌曲播放的时间/添加定时器
- valueChange—>改变滑块的位置/改变当前播放时间的Label的⽂字
- 添加点击⼿手势—>获取点击位置的⽐比例—>计算应该歌曲播放时间
6.对歌曲事件处理
- 暂停/播放
- 上一首
- 下⼀⾸
- 当歌曲正常播放完成,自动播放下一⾸
7.添加ScrollView(lrcView)
- 自定义LrcView
- 在ScrollView中添加tableView—>约束问题
8.解析歌词
- 给ScrollView定义了lrcname属性
- 定义了⼯具类—>解析歌词—>返回歌词数据(NSArray)
- tableView展示歌词
- 设置⼀系列tableView
- 设置tableView额外滚动区域
9.显⽰对应的句歌词
- 给ScrollView定义了currentTime
- 定义了CADisplayLink—>添加定时器
- 用currentTime和lrclist所有的歌词的时间对比
- 找到应该显示lrclist中的某⼀句歌词(对应的下标)
- 刷新该句的歌词(cell)—>让文字变大—> 定义currentIndex—>刷新两句将当前句的Cell滚动到bottom/top
10.当可以显⽰某一个句歌词之后,让该句歌词渐变效果
- 自定义Label—>drawRect—>设置颜色—>UIRectFillUsingBlendMode(设置渐变)
- 给自定义Label传⼊进度
- 自定义cell,并且将label加入cell中
- 拿到当前显示的Cell—>设置label的进度—>当前时间-当前句开始时间/下一句的时间-当前句的时间
- 外面Label—>引用传给ScrollView—>改变显示文字和进度
