仿网易云音乐app

文化娱乐音乐案例ID：160533

微｀執

1 年经验· 广州维思软件有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

使用技术：HTML、CSS、JavaScript、HTML5、CSS3、Canvas、Vue、Axios、Vue-Router、Vuex

项目地址：http://106.15.5.157:5000

项目描述：音乐App，数据使用网易云的接口，UI界面仿网易云移动端，核心功能实现了播放暂停、滑动切换上下首歌曲、圆环进度条、播放模式切换、歌词滚动、音频可视化

项目难点：

1. 圆环进度条：使用CanvasCtx.arc绘制默认圆环，红色进度条圆环使用audio的currentTime / duration 得出百分比，再计算弧度(Math*2*百分比)，使用arc方法从起始弧度绘制到当前弧度；

2.播放模式以及播放列表使用VueX管理，使用Action异步提交Mutation来更改播放列表

3. 歌词滚动实现：歌词数据使用正则匹配当前秒数、歌词；使用split切割成数组，在获取歌曲播放当前秒数判断显示哪一行歌词，歌词滚动高亮是在scroll事件中根据当前滚动距离判断区间接近于多少行歌词元素的高度相加

4. 音频可视化数据使用createMediaElementSource接管audio标签，使用getByteFrequencyData获取每一帧数据，再使用Canvas绘制每条线，对每条线的角度进行旋转