基于 Vue 的在线音乐播放器完整源码+说明.zip

# mmPlayer > mmPlayer 是由茂茂开源的一款在线音乐播放器，具有音乐搜索、播放、歌词显示、播放历史、查看歌曲评论、网易云用户歌单播放同步等功能 模仿 QQ 音乐网页版界面，采用 `flexbox` 和 `position` 布局；<br /> mmPlayer 虽然是响应式，但主要以 PC 端为主，移动端只做相应适配；<br /> 只做主流浏览器兼容（对 IE 说拜拜，想想以前做项目还要兼容 IE7 ，都是泪啊！！！） - [在线演示地址](https://netease-music.fe-mm.com/) - [React 移动端版本（高仿网易云音乐）](https://github.com/maomao1996/react-music) - [交流 QQ 群：529940193](http://shang.qq.com/wpa/qunwpa?idkey=f8be1b627a89108ccfda9308720d2a4d0eb3306f253c5d3e8d58452e20b91129) 本群不解答部署相关问题，如有部署问题请看[关于项目线上部署](#关于项目线上部署) - 本播放器由 **[茂茂](https://github.com/maomao1996) 开发**，您可以随意修改、使用、转载。但**使用或转载时请务必保留出处（控制台的注释信息）**！！！ ## 免责声明 1. 本项目是一个**前端练手的实战项目**，旨在**帮助开发者提升技能水平和对前端技术的理解**。 2. 本项目**不提供任何音频存储和贩卖服务**。所有音频内容均由网易云音乐的第三方 API 提供，**仅供个人学习研究使用，严禁将其用于任何商业及非法用途**，版权归原始平台所有。 3. 使用本项目造成的任何纠纷、责任或损失**由使用者自行承担**。本项目开发者不对因使用本项目而产生的任何直接或间接责任承担责任，并保留追究使用者违法行为的权利。 4. **请使用者在使用本项目时遵守相关法律法规，不得将本项目用于任何商业及非法用途**。如有违反，一切后果由使用者自负。同时，使用者应该自行承担因使用本项目而带来的风险和责任。 5. 本项目使用了网易云音乐的[第三方 API 服务](https://github.com/Binaryify/NeteaseCloudMusicApi)，对于该第三方 API 服务造成的任何问题，本项目开发者不承担责任。 请在使用本项目之前仔细阅读以上免责声明，并确保您已完全理解并接受其中的所有条款和条件。如果您不同意或无法遵守这些规定，请不要使用本项目。 ## 安装与使用 ### 检查 node 版本 ```sh # 查看 node 版本，确保 node 版本高于 12 版本 node -v ``` ### mmPlayer ```sh # 下载 mmPlayer git clone https://github.com/maomao1996/Vue-mmPlayer # 进入 mmPlayer 播放器目录 cd Vue-mmPlayer # 安装依赖 推荐使用 pnpm pnpm install # 或者 npm install # 本地运行 mmPlayer npm run serve # 编译打包 npm run build ``` ### 后台 api 服务（本地开发） [网易云音乐 NodeJS 版 API](https://binaryify.github.io/NeteaseCloudMusicApi) ```sh # 下载 NeteaseCloudMusicApi git clone --depth=1 https://github.com/Binaryify/NeteaseCloudMusicApi # 进入 NeteaseCloudMusicApi 后台服务目录 cd NeteaseCloudMusicApi # 安装依赖 npm install # 运行后台 api 服务 访问 http://localhost:3000 node app.js ``` ### 注意点 **运行 mmPlayer 后无法获取音乐请检查后台 `api` 服务是否启动(即控制台请求报 404)**<br /> **线上部署不是直接将整个项目丢到服务器，再去运行 `npm run serve` 命令**<br /> **项目打包前 `VUE_APP_BASE_API_URL` 必须改后台 `api` 服务地址为线上地址，不能是本地地址** ### 关于项目线上部署 最近有不少小伙伴部署出了问题，我在这说明下 - 后台 `api` 服务线上部署 - 你需要将 [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) 下载 - 然后将下载的文件上传至服务器 - 再通过 `pm2` 去启动服务(`pm2` 安装和相关命令网上有很多，这里不再赘述) - 最后通过服务器 `ip` + 端口号访问验证 `api` 服务是否启动成功 - `mmPlayer` 线上部署（推荐使用 [Vercel 部署](#vercel-部署)） - 首先要注意的是 - 先将 `.env` 文件的 `VUE_APP_BASE_API_URL` 修改成上一步启动的后台 `api` 服务地址(服务器 `ip` + 端口号或者你绑定的域名) - 然后先在本地运行 `npm run build` 命令，会打包在生成一个 `dist` 文件 - 最后将打包的 `dist` 文件上传到你的网站服务器目录即可 - 其他：[在宝塔面板部署 mmPlayer](https://github.com/maomao1996/Blog/issues/1)（不喜欢写文，可能有点烂不要介意哈） - 最后：本人已和谷歌、百度达成合作了，如果还有啥不懂的，以后可以直接谷歌、百度 #### Vercel 部署 1. `fork` 此项目 2. 在 [Vercel](https://vercel.com) 官网点击 New Project 3. 点击 `Import Git Repository` 1. 选择你 `fork` 的此项目 2. 点击 `import` 4. `Configure Project` 配置 1. `Project Name` 自己填 2. `Framework Preset` 选 `Vue.js` （基本默认就是，不用修改） 3. 点击 `Environment Variables`，并添加一条 1. `key` 输入 `VUE_APP_BASE_API_URL` 2. `value` 输入你后台 `api`（[NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)）服务的线上地址 5. 点击 `Deploy` 等部署完成即可 ## 技术栈 - [Vue Cli](https://cli.vuejs.org/zh/) Vue 脚手架工具 - [Vue 2.x](https://v2.cn.vuejs.org/) 核心框架 - [Vue Router](https://router.vuejs.org/zh/) 页面路由 - [Vuex](https://vuex.vuejs.org/zh/) 状态管理 - ES6 （JavaScript 语言的下一代标准） - Less（CSS 预处理器） - Axios（网络请求） - FastClick（解决移动端 300ms 点击延迟） ## 项目结构目录图（使用 tree 生成） <details> <summary>展开查看</summary> <pre><code> ├── public // 静态资源目录 │ └─index.html // 入口 html 文件 ├── screenshots // 项目截图 ├── src // 项目源码目录 │ ├── api // 数据交互目录 │ │ └── index.js // 获取数据 │ ├── assets // 资源目录 │ │ └── background // 启动背景图目录 │ │ └── img // 静态图片目录 │ ├── base // 公共基础组件目录 │ │ ├── mm-dialog │ │ │ └── mm-dialog.vue // 对话框组件 │ │ ├── mm-icon │ │ │ └── mm-icon.vue // icon 组件 │ │ ├── mm-loading │ │ │ └── mm-loading.vue // 加载动画组件 │ │ ├── mm-no-result │ │ │ └── mm-no-result.vue // 暂无数据提示组件 │ │ ├── mm-progress │ │ │ └── mm-progress.vue // 进度条拖动组件 │ │ └── mm-toast │ │ ├── index.js // mm-toast 组件插件化配置 │ │ └── mm-toast.vue // 弹出层提示组件 │ ├── components // 公共项目组件目录 │ │ ├── lyric │ │ │ └── lyric // 歌词和封面组件 │ │ └── mm-header │ │ │ └── mm-header.vue // 头部组件 │ │ ├── music-btn │ │ │ └── music-btn.vue // 按钮组件 │ │ ├── music-list │ │ │ └── music-list.vue // 列表组件 │ │ └── volume │ │