vue 全家桶实现简易版网易云音乐播放器

开发目的

由于没有尝试过WebApp的开发，这算是我作的的第一个移动端页面吧，也为了更加熟练的运用vue以及vue全家桶进行开发，提高本身模块化开发的水平，尝试让本身的代码变得更整洁。

第一次写文章，有点激动！

本项目使用了vue全家桶，以及better-scroll，Scss等实现了一款（po）简（lan）易的移动端音乐播放器，UI参考了IOS端的网易云音乐APP。

• 项目演示地址 网易云WebApp ,因为租不起服务器，因此这个连接会跟随我下班的脚步逐渐消失~~。
• tips：因为目前线上后台使用后台代码维护者的服务器，代码并非最新的，其中歌词接口挂了，能够自行去NeteaseCloudMusicApi 下载代码并在本地运行，有些接口参数也变了
• 请使用chrome的手机调试模式预览，如不能滚动请刷新页面~~
• 项目利用空余时间断断续续写了快两周才写完的，做为初入前端不到一年的小白，正在努力提高本身的coding水平中，项目的功能还在完善中，很是但愿大神们能给好的建议，项目确定有许多须要优化的地方，以及一些bug（因为并无在许多手机上测试过，只在本身手机和朋友手机上简单测试）。

源码地址：vue-cli3 WebApp

界面预览

技术栈

• vue：MVVM框架，整个项目的基础
• vue-cli：快速初始化搭建项目
• vuex：状态管理工具，用于对音乐播放状态、播放列表、播放模式等进行控制管理
• vue-router：vue自带的路由系统，用于单页应用的页面快速切换
• vue-lazyload：用于图片资源的懒加载
• Scss：css 预编译处理器
• better-scroll：页面滚动控制，可以实现大多数页面滚动需求，如轮播图、页面上拉加载、下拉刷新、页面滚动动等
• lyric-parser：用于对歌词进行解析
• node.js：后端使用的是 NeteaseCloudMusicApi 提供的接口
• vue-aixos：用于请求后端数据

目前实现的功能

主页面-推荐页

1. 主页面主要分为上部分banner图，导航菜单，中间部分推荐歌单列表，以及底部的导航栏

2. banner图主要使用了better-scroll插件，进行了单独封装

3. 推荐歌单布局使用了flex布局，更好的适配移动端，推荐歌单封面图片结合vue-lazyload实现图片的懒加载，避免了一次加载过多数据而致使性能问题，以及节省流量

4. 底部导航栏，目前只实现了发现页。。。

每日推荐页面

1. 歌曲列表进行了单独封装，用于多页面复用
2. 因为未实现登陆功能，每日推荐接口须要用户参数信息，所以暂时使用固定数据

歌单，排行榜页面

1. 与首页的推荐页面相同，歌单列表与推荐页歌单列表组件实现了复用，页面展现了各个歌单分类
2. 排行榜页面与歌单列表页面相似，因为排列方式不一样以及多了一些文字描述，并无和歌单列表组件实现复用，点击对应的歌单根据歌单id，进入对应的歌单详情页获取歌单全部歌曲

歌单列表页

1. 根据歌单id获取歌单列表以及封面等数据
2. 点击播放所有按钮将全部歌曲加入播放队列中，当播放模式为随机播放时，随机开始播放歌曲，若是为顺序播放，则从第一首歌曲开始播放。
3. 点击歌曲列表其中一首歌曲，能够开始播放这首歌曲并将其余歌曲加入播放列表

歌曲播放页面

1. 当歌曲正在播放时，歌曲封面图片开始旋转，利用animation属性，实现无限旋转动画，当暂停歌曲时暂停动画

transform: rotate(360deg); // 旋转360度
animation: rotation 8s linear infinite; // 无限旋转
复制代码

animation-play-state: paused; // 实现歌曲暂停，动画暂停
复制代码

2. 点击播放页面上半部分，能够切换歌词页，歌词的解析使用lyric-parser插件，将歌词数据解析后可获得歌词以及对应的时间戳，其内部经过定时器来实现歌词与歌曲的同步（使用后不知道为何有些歌曲与歌词并不能同步，目前未解决，本人以为歌曲的歌词应该和歌曲播放进度进行关联）

播放器核心播放功能

1. 音乐的播放使用H5的 audio 标签，播放歌曲的基本实现--经过 watch 监听当前播放歌曲，当播放歌曲改变时，给 audio 设置新的 url 歌曲便能实现切换
2. audio提供了许多事件，其中oncanplay事件能够判断音乐文件是否就绪，在就绪后才能继续以后的一些操做。timeupdate事件返回歌曲播放进度时间，提供咱们显示歌曲播放进度。ended事件在当前歌曲播放结束后触发，使用该事件触发播放下一首歌曲
3. 播放进度条单独封装成组件，该组件接收当前播放时间以及歌曲总时长两个参数，经过当前播放时间以及总时长计算百分比，经过watch当前播放时间，实时改变播放进度，设置进度条的位置以及对应样式属性
4. 一样的，给进度条圆点添加touch事件，计算拖动的水平距离百分比，设置当前播放进度
5. 歌曲随机播放功能，随机取0到播放列表歌曲数的数值，设置为当前播放歌曲索引，实现歌曲的随机播放；当歌曲为循环播放模式时，歌曲播放结束后重置当前播放时间，不改变当前歌曲索引

播放列表

1. 展现全部播放队列中的歌曲，点击歌曲名字切换播放对应歌曲
2. 实现打开播放列表自动定位到当前播放歌曲并滑动到第一行
3. 删除播放列表中的歌曲，当删除正在播放的歌曲时，自动切换至下一首歌曲开始播放，当删除全部歌曲时，中止播放歌曲并跳转至首页
4. 播放列表一样能控制歌曲播放模式，与播放页面同步

最后

感谢

• 感谢 Binaryify 对接口文档 NeteaseCloudMusicApi 的不断维护与更新。

接下来要作的事

• 实现用户登陆功能
• 尽可能完善各页面
• 优化代码
• 大佬们能给个star鼓励下么 Star