仿网易云的音乐播放器

前言

本次项目的开始的初衷是之前在使用js实现音频播放时就打算着手实践的,花了一些时间将该项目落地了。
本项目是仿制网易云音乐客户端版的web实现,实际上该项目只是前端项目,数据是模拟的(数据量不大)。
之所以动手该项目,实际上有如下几点:

  • 喜欢网易云音乐的客户端版的风格
  • 对于音频以及视频播放有兴趣,自己也没有做过
  • 回顾vue相关,作为开启vue相关源码学习的开端

该项目未采用任何前端框架,所涉及的技术框架:vue全家桶(vue + vuex +vue-router) + font awesome(图标)+ less

项目实现效果

项目实现效果如下图所示:

  • 发现音乐页面:

发现音乐页面

  • 私人FM页面:

私人FM页面

  • 我喜欢的音乐页面

我喜欢的音乐页面

  • 个性换肤

个性换肤

  • 左侧歌曲icon点击展开的播放页面

播放

  • 私人FM播放与切换

私人FM

结束语

上面展示的就是整体的实现部分,所有的组件的都是自己编写,例如轮播、滑动、音频、视频等。既然是一个开源项目,我想所有的东西都自己动手来实现。
代码会上传到我的GitHub,欢迎fork和star。