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

小智i
2,153 阅读6分钟

开发目的

因为没有尝试过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; // 实现歌曲暂停，动画暂停
  1. 点击播放页面上半部分，可以切换歌词页，歌词的解析使用lyric-parser插件，将歌词数据解析后可得到歌词以及对应的时间戳，其内部通过定时器来实现歌词与歌曲的同步（使用后不知道为什么有些歌曲与歌词并不能同步，目前未解决，本人觉得歌曲的歌词应该和歌曲播放进度进行关联）

播放器核心播放功能

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

播放列表

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

最后

感谢

接下来要做的事

  • 实现用户登录功能
  • 尽量完善各页面
  • 优化代码
  • 大佬们能给个star鼓励下么 Star
avatar
文章
阅读
粉丝