/Vue-mmPlayer

基于Vue2的在线音乐播放器(PC) Online music player (vue-music)

Primary LanguageJavaScriptMIT LicenseMIT

mmPlayer V1.4.0(2018.04.09)

模仿QQ音乐网页版界面,采用flexbox和position布局; mmPlayer虽然是响应式,但主要以为PC端为主,移动端只做相应适配(未做歌词显示); 只做主流浏览器兼容(对IE说拜拜,想想以前做项目还要兼容IE7,都是泪啊!!!)

api:一个开源的网易云音乐 NodeJS 版 API(有api才有动力写!!!)

在线演示地址

桌面版下载

如何安装与使用

后台服务器

cd mmPlayer/server //进入后台服务器目录

npm install //安装依赖

node app.js //服务端运行 访问 http://localhost:3000

mmPlayer

git clone https://github.com/maomao1996/mmPlayer.git  //下载mmPlayer

cd mmPlayer //进入mmPlayer播放器目录

npm install //安装依赖

npm run dev //服务端运行

npm run build  //项目打包

运行mmPlayer后无法获取音乐请检查后台服务器是否启动

api目录下music的url地址要和后台服务器地址一致

技术栈

  • Vue(核心框架)
  • Vue-Router(页面路由)
  • Vuex(状态管理)
  • ES 6 / 7
  • Less(CSS预处理器)
  • Axios(网络请求)
  • FastClick(解决移动端300ms点击延迟)

项目布局

├── build                                           // webpack配置文件
├── config                                          // 项目打包路径
├── mmPlayer                                        // 项目打包版本,可直接使用
├── screenshots                                     // 项目截图
├── server                                          // 后台服务器目录
├── src                                             // 项目源码目录
│   ├── api                                         // 数据交互目录
│   │   └── music.js                                // 获取数据
│   ├── assets                                      // 资源目录
│   │   ├── css                                     // 样式文件目录
│   │   │   ├── index.less                          // mmPlayer相关基础样式
│   │   │   ├── mixin.less                          // 样式混合
│   │   │   ├── reset.less                          // 样式重置
│   │   │   └── var.less                            // 样式变量(字体大小、字体颜色、背景颜色)
│   │   ├── img                                     // 静态图片目录
│   │   └── js                                      // 数据交互目录
│   │        ├── config.js                          // 基本配置
│   │        ├── mixin.js                           // 组件混合
│   │        ├── song.js                            // 数据处理
│   │        ├── storage.js                         // localstorage配置
│   │        └── util.js                            // 公用js方法
│   ├── base                                        // 公共基础组件目录
│   │   ├── mm-dialog
│   │   │   └── mm-dialog.vue                       // 对话框组件
│   │   ├── mm-loading
│   │   │   └── mm-loading.vue                      // 加载动画组件
│   │   ├── mm-no-result
│   │   │   └── mm-no-result.vue                    // 暂无数据提示组件
│   │   ├── mm-progress
│   │   │   └── mm-progress.vue                     // 进度条拖动组件
│   │   └── mm-toast
│   │        └── mm-toast.vue                       // 弹出层提示组件
│   ├── components                                  // 公共项目组件目录
│   │   ├── lyric
│   │   │   └── lyric                               // 歌词和封面组件
│   │   └── mm-header
│   │   │   └── mm-header.vue                       // 头部组件
│   │   ├── music-btn
│   │   │   └── music-btn.vue                       // 按钮组件
│   │   └── music-list
│   │        └── music-list.vue                     // 列表组件
│   ├── pages                                       // 入口主文件
│   │   ├── details
│   │   │   └── details.vue                         // 排行榜详情
│   │   ├── historyList
│   │   │   └── historyList.vue                     // 我听过的(播放历史)
│   │   ├── playList
│   │   │   └── playList.vue                        // 正在播放
│   │   ├── search
│   │   │   └── search.vue                          // 搜索
│   │   ├── userList
│   │   │   └── userList.vue                        // 我的歌单
│   │   ├── topList
│   │   │   └── topList.vue                         // 排行榜页面
│   │   ├── mmPlayer.js                             // 播放器事相关件绑定
│   │   └── mmPlayer.vue                            // 播放器主页面
│   ├── router
│   │   └── index.js                                // 路由配置
│   ├── store                                       // vuex的状态管理
│   │   ├── actions.js                              // 配置actions
│   │   ├── getters.js                              // 配置getters
│   │   ├── index.js                                // 引用vuex,创建store
│   │   ├── mutations.js                            // 配置mutations
│   │   ├── mutation-types.js                       // 定义常量mutations名
│        └── state.js                               // 配置state
│   ├── App.vue                                     // 根组件
│   └── main.js                                     // 入口主文件
├── static                                          // 静态资源文件目录
└── index.html                                      // 入口html文件

功能

  • 播放器
  • 歌词滚动
  • 排行榜
  • 搜索
  • 播放历史
  • 同步网易云歌单

界面欣赏

正在播放 排行榜 搜索 我的歌单 我听过的

更新说明

V1.4.0(2018.04.09)预期功能全部完成

  • 新增同步网易云歌单功能
  • 新增快捷键控制
    • 上一曲 Ctrl + Left
    • 播放暂停 Ctrl + Space
    • 下一曲 Ctrl + Right
    • 切换播放模式 Ctrl + O
    • 音量加 Ctrl + Up
    • 音量减 Ctrl + Down
  • 修复safari和安卓UC不能播放的问题
  • 优化url失效问题和音乐无法播放的提示
  • 优化移动端下的样式兼容

V1.3.2(2018.03.19)

  • 新增播放链接失效后自动重载当前音乐
  • 优化列表循环不会自动下一曲问题
  • 优化删除正在播放列表歌曲失效问题
  • 优化删除歌曲过快会触发播放问题
  • 优化音乐来源错误不能播放问题,并使用 oncanplay
  • 添加播放历史,避免不能播放的音乐加入播放历史
  • 修复不能加入音乐到我听过的问题

V1.3.1(2018.03.12)

  • 新增双击播放
  • 新增更新提示
  • 优化无歌词时的显示
  • 优化暂无内容提醒
  • 优化列表多位歌手的显示

V1.3.0(2018.03.07)

  • 新增随机播放、列表循环、单曲循环、顺序播放功能
  • 新增清空正在播放列表功能
  • 新增清空列表的提示
  • 新增版权信息(控制台输入mmPlayer)
  • 增加背景滤镜的模糊度和透明度
  • 增加浏览器访问的限制(兼容主流浏览器,最好全是用chrome,哈哈)
  • 整合music-list组件
  • CSS的@import使用 ~ 代替相对路径(原理:css-loader会把把非根路径的url解释为相对路径,加~前缀才会解释成模块路径)
  • 优化Safari下不能滚动和不能播放的问题
  • 优化移动端300ms点击延迟
  • 优化当播放列表只有一首歌时,点击上(下)一曲导致播放失败的问题
  • 优化重复插入音乐的问题
  • 优化暂停后播放下一首播放状态图标不改变的问题

V1.2.1(2018.03.01)

  • 优化正在播放列表第一次加载
  • 优化删除歌曲
  • 优化Vuex模块
  • 优化加载loading
  • 优化移动端适配
  • 提高代码复用性

V1.2.0(2018.02.28)

  • 新增搜索功能
  • 新增歌曲删除功能(播放历史列表)
  • 使用ES6的class对数据进行二次处理
  • 优化歌词居中显示
  • 优化播放可能出现的错误

V1.1.0(2018.02.09)

  • 新增我听过的(播放历史)
  • 整合公用列表组件
  • 新增mmToast插件
  • 整合字体大小、颜色相关CSS
  • 优化清空正在播放列表功能

V1.0.0(2018.02.05)

  • 发布正式版(因为一系列原因,mmPlayer V1.0.0版本在试用版的基础上进行了重构了,并引入了Vue-Router和Vuex
  • 当前播放歌曲高亮(感觉一个小GIF还不够)
  • 优化快速切歌导致歌曲播放失败的问题
  • 进度条拖动适配移动端
  • 优化点击时可能出现的半透明背景
  • 新增排行榜

其他说明

  • 个人练手项目(本想先做移动端的,但是发现有很多人都做过,就稍微标新立异做个PC端)
  • 如果您喜欢该作品,您可以点右上角 "Star" 表示支持 谢谢!
  • 后续:SSR版本、移动端版本、其他作品

License

MIT