案例介绍
使用技术：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绘制每条线，对每条线的角度进行旋转
案例图片
相似案例推荐
其他人才的相似案例推荐
-
趣唱APP
趣唱软件是由趣唱科技有限公司推出的一款手机K歌软件，该款软件
-
媒体播放器
车载应用 本地播放：搜索sdcard内的音频文件异步加载到
-
海洋音乐-手机版&PAD版
海洋音乐是一款集本地音乐播放，云音乐存储及在线音乐查找服务为
-
联合会员
负责联合会员业务，联合多家大厂会员，为用户推多个买一得N系列
-
Vue音乐网站
网站功能 1、播放歌曲 2、播放mv 3、推荐歌曲
-
悦享音乐网
网站功能 1、播放歌曲 2、播放mv 3、推荐歌曲
-
via音乐
产品定位 专注于音乐的发现与分享，歌曲版权多、拥有丰富曲库
-
快音
参与开发快音APP音乐推荐系统的开发，根据数据分析以及算法工
-
咪咕音乐维语版
项目名称叫麦西来普（Maxrap），我主要负责一些项目基础架
-
移动端音乐
仿网易云音乐APP实现主页，歌单、歌手、排行、搜索、歌单详情
-
音乐播放器
主要功能： 通过手机号码进行验证码登录； 通过密码登录；
-
乐趣app
对功能来说，集合了诸多版权，对一些其他收费音乐的免费收听，主
微信接收人才推送
关注猿急送微信平台，接收实时人才推送
