Home

Awesome

mmPlayer

mmPlayer 是由茂茂开源的一款在线音乐播放器，具有音乐搜索、播放、歌词显示、播放历史、查看歌曲评论、网易云用户歌单播放同步等功能

模仿 QQ 音乐网页版界面，采用 flexbox 和 position 布局；<br /> mmPlayer 虽然是响应式，但主要以 PC 端为主，移动端只做相应适配；<br /> 只做主流浏览器兼容（对 IE 说拜拜，想想以前做项目还要兼容 IE7 ，都是泪啊！！！）

免责声明

  1. 本项目是一个前端练手的实战项目，旨在帮助开发者提升技能水平和对前端技术的理解。

  2. 本项目不提供任何音频存储和贩卖服务。所有音频内容均由网易云音乐的第三方 API 提供，仅供个人学习研究使用，严禁将其用于任何商业及非法用途，版权归原始平台所有。

  3. 使用本项目造成的任何纠纷、责任或损失由使用者自行承担。本项目开发者不对因使用本项目而产生的任何直接或间接责任承担责任，并保留追究使用者违法行为的权利。

  4. 请使用者在使用本项目时遵守相关法律法规，不得将本项目用于任何商业及非法用途。如有违反，一切后果由使用者自负。同时，使用者应该自行承担因使用本项目而带来的风险和责任。

  5. 本项目使用了网易云音乐的第三方 API 服务，对于该第三方 API 服务造成的任何问题，本项目开发者不承担责任。

请在使用本项目之前仔细阅读以上免责声明，并确保您已完全理解并接受其中的所有条款和条件。如果您不同意或无法遵守这些规定，请不要使用本项目。

安装与使用

检查 node 版本

# 查看 node 版本，确保 node 版本高于 12 版本
node -v

mmPlayer

# 下载 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

# 下载 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 服务地址为线上地址，不能是本地地址

关于项目线上部署

最近有不少小伙伴部署出了问题，我在这说明下

Vercel 部署

  1. fork 此项目
  2. 在 Vercel 官网点击 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）服务的线上地址
  5. 点击 Deploy 等部署完成即可

技术栈

项目结构目录图（使用 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 │ │ └── volume.vue // 音量控制组件 │ ├── pages // 页面组件目录 │ │ ├── comment │ │ │ └── comment.vue // 评论 │ │ ├── details │ │ │ └── details.vue // 排行榜详情 │ │ ├── historyList │ │ │ └── historyList.vue // 我听过的（播放历史） │ │ ├── playList │ │ │ └── playList.vue // 正在播放 │ │ ├── search │ │ │ └── search.vue // 搜索 │ │ ├── topList │ │ │ └── topList.vue // 排行榜页面 │ │ ├── userList │ │ │ └── userList.vue // 我的歌单 │ │ ├── mmPlayer.js // 播放器事相关件绑定 │ │ └── music.vue // 播放器主页面 │ ├── router │ │ └── index.js // 路由配置 │ ├── store // vuex 的状态管理 │ │ ├── actions.js // 配置 actions │ │ ├── getters.js // 配置 getters │ │ ├── index.js // 引用 vuex，创建 store │ │ ├── mutation-types.js // 定义常量 mutations 名 │ │ ├── mutations.js // 配置 mutations │ │ └── state.js // 配置 state │ ├── styles // 样式文件目录 │ │ ├── index.less // mmPlayer 相关基础样式 │ │ ├── mixin.less // 样式混合 │ │ ├── reset.less // 样式重置 │ │ └── var.less // 样式变量（字体大小、字体颜色、背景颜色） │ ├── js // 数据交互目录 │ │ ├── axios.js // axios 简单封装 │ │ ├── hack.js // 修改 nextTick │ │ ├── mixin.js // 组件混合 │ │ ├── song.js // 数据处理 │ │ ├── storage.js // localStorage 配置 │ │ └── util.js // 公用 js 方法 │ ├── App.vue // 根组件 │ ├── config.js // 配置文件（播放器默认配置、版本号等） │ └── main.js // 入口主文件 └── vue.config.js // vue-cli 配置文件

</code></pre>

</details>

功能与界面

界面欣赏

PC 端界面自我感觉还行， 就是移动端界面总觉得怪怪的，奈何审美有限，所以又去整了高仿网易云的 React 版本（如果小哥哥、小姐姐们有好看的界面，欢迎交流哈）

<details> <summary>点击查看</summary>

PC

正在播放

正在播放

排行榜

排行榜

搜索

搜索

我的歌单

我的歌单

我听过的

我听过的

歌曲评论

歌曲评论

移动端

移动端一 移动端二

</details>

更新说明

V1.8.3（2022.12.01）

<details> <summary>查看更多</summary>

V1.8.2（2021.08.23）

V1.8.1（2021.02.02）

V1.8.0（2020.08.22）

V1.7.1（2020.07.11）

V1.7.0（2020.06.27）

V1.6.9（2020.06.04）

V1.6.8（2020.06.01）

V1.6.7（2020.05.02）

V1.6.6（2020.04.18）

V1.6.5（2020.04.09）

V1.6.4（2020.02.04）

V1.6.3（2020.01.09）

V1.6.2（2019.11.17）

V1.6.1（2019.09.28）

V1.6.0（2019.08.26）

V1.5.7（2019.08.19）

V1.5.6（2019.04.04）

V1.5.5（2019.03.29）

V1.5.4（2019.01.08）

V1.5.3（2018.07.30）

V1.5.2（2018.05.23）

V1.5.1（2018.05.21）

V1.5.0（2018.05.05）

V1.4.0（2018.04.09）预期功能全部完成

V1.3.2（2018.03.19）

V1.3.1（2018.03.12）

V1.3.0（2018.03.07）

V1.2.1（2018.03.01）

V1.2.0（2018.02.28）

V1.1.0（2018.02.09）

V1.0.0（2018.02.05）

</details>

数据统计

因为百度统计现在数据存储时长默认为 1 年，造成前几年的数据都丢了（虽说没啥用，但是也是本作品成长的历史），所以在 github 保存下每年的累计访问

2023 年累计访问

2023

2022 年累计访问

2022

其他说明

鸣谢

特别感谢 JetBrains 为开源项目提供免费的 WebStorm 授权

License

MIT