56
GitHub - maomao1996/Vue-mmPlayer: 基于Vue2的在线音乐播放器（PC） Online music pl...
source link: https://github.com/maomao1996/Vue-mmPlayer
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
mmPlayer V1.5.2（2018.05.23）
模仿QQ音乐网页版界面，采用flexbox和position布局； mmPlayer虽然是响应式，但主要以为PC端为主，移动端只做相应适配（未做歌词显示）； 只做主流浏览器兼容（对IE说拜拜，想想以前做项目还要兼容IE7，都是泪啊！！！）
api：一个开源的网易云音乐 NodeJS 版 API（有api才有动力写！！！）
在线演示地址
桌面版下载
React移动端版本（高仿网易云音乐）
交流QQ群：529940193
如何安装与使用
mmPlayer
git clone https://github.com/maomao1996/Vue-mmPlayer.git //下载mmPlayer
cd mmPlayer //进入mmPlayer播放器目录
npm install //安装依赖
npm run dev //服务端运行
npm run build //项目打包
后台服务器
cd mmPlayer/server //进入后台服务器目录
npm install //安装依赖
node app.js //服务端运行 访问 http://localhost:3000
运行mmPlayer后无法获取音乐请检查后台服务器是否启动
assets/js/config的url地址要和后台服务器地址一致
技术栈
- Vue-Cli（Vue 脚手架工具）
- Vue（核心框架）
- Vue-Router（页面路由）
- Vuex（状态管理）
- ES 6 / 7 （JavaScript 语言的下一代标准）
- 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 // 入口主文件
│ │ ├── comment
│ │ │ └── comment.vue // 评论
│ │ ├── 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文件
功能
- 播放器
- 快捷键操作
- 歌词滚动
- 正在播放
- 排行榜
- 歌单详情
- 搜索
- 播放历史
- 查看评论
- 同步网易云歌单
界面欣赏
PC端界面自我感觉还行， 就是移动端界面总觉得怪怪的，奈何审美有限，所以又去整了高仿网易云的 React 版本（如果小哥哥、小姐姐们有好看的界面，欢迎交流哈）
PC
正在播放
排行榜
搜索
我的歌单
我听过的
歌曲评论
移动端
更新说明
V1.5.2（2018.05.23）
- 新增推荐歌单
- 新增图片懒加载
- 更新获取歌单列表接口
- 优化歌单列表展示
V1.5.1（2018.05.21）
- 更新后台服务器
- 修改热搜展示数据
- 提取基础网络请求中的配置
V1.5.0（2018.05.05）
- 新增评论详情功能（网易云音乐最重要的部分不能漏）
- 新增title提示
- 新增noscript提示
- 优化歌词滚动
- 优化图片大小，提升加载速度
- 优化歌曲切换时样式错乱
- 增强模块化
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" "Fork" 表示支持 谢谢！
- 后续：移动端版本、其他作品
- 如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK