mmPlayer 是由茂茂开源的一款在线音乐播放器,具有音乐搜索、播放、歌词显示、播放历史、查看歌曲评论、网易云用户歌单播放同步等功能
模仿 QQ 音乐网页版界面,采用 flexbox
和 position
布局;
mmPlayer 虽然是响应式,但主要以 PC 端为主,移动端只做相应适配;
只做主流浏览器兼容(对 IE 说拜拜,想想以前做项目还要兼容 IE7 ,都是泪啊!!!)
本项目是一个前端练手的实战项目,旨在帮助开发者提升技能水平和对前端技术的理解。
本项目不提供任何音频存储和贩卖服务。所有音频内容均由网易云音乐的第三方 API 提供,仅供个人学习研究使用,严禁将其用于任何商业及非法用途,版权归原始平台所有。
使用本项目造成的任何纠纷、责任或损失由使用者自行承担。本项目开发者不对因使用本项目而产生的任何直接或间接责任承担责任,并保留追究使用者违法行为的权利。
请使用者在使用本项目时遵守相关法律法规,不得将本项目用于任何商业及非法用途。如有违反,一切后果由使用者自负。同时,使用者应该自行承担因使用本项目而带来的风险和责任。
本项目使用了网易云音乐的第三方 API 服务,对于该第三方 API 服务造成的任何问题,本项目开发者不承担责任。
请在使用本项目之前仔细阅读以上免责声明,并确保您已完全理解并接受其中的所有条款和条件。如果您不同意或无法遵守这些规定,请不要使用本项目。
# 查看 node 版本,确保 node 版本高于 12 版本
node -v
# 下载 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
# 下载 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)
线上部署不是直接将整个项目丢到服务器,再去运行 npm run serve
命令
项目打包前 VUE_APP_BASE_API_URL
必须改后台 api
服务地址为线上地址,不能是本地地址
最近有不少小伙伴部署出了问题,我在这说明下
api
服务线上部署
pm2
去启动服务(pm2
安装和相关命令网上有很多,这里不再赘述)ip
+ 端口号访问验证 api
服务是否启动成功mmPlayer
线上部署(推荐使用 Vercel 部署)
.env
文件的 VUE_APP_BASE_API_URL
修改成上一步启动的后台 api
服务地址(服务器 ip
+ 端口号或者你绑定的域名)npm run build
命令,会打包在生成一个 dist
文件dist
文件上传到你的网站服务器目录即可fork
此项目Import Git Repository
fork
的此项目import
Configure Project
配置
Project Name
自己填Framework Preset
选 Vue.js
(基本默认就是,不用修改)Environment Variables
,并添加一条
key
输入 VUE_APP_BASE_API_URL
value
输入你后台 api
(NeteaseCloudMusicApi)服务的线上地址Deploy
等部署完成即可
├── 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 配置文件
PC 端界面自我感觉还行, 就是移动端界面总觉得怪怪的,奈何审美有限,所以又去整了高仿网易云的 React
版本(如果小哥哥、小姐姐们有好看的界面,欢迎交流哈)
因为百度统计现在数据存储时长默认为 1 年,造成前几年的数据都丢了(虽说没啥用,但是也是本作品成长的历史),所以在 github 保存下每年的累计访问
2023 年累计访问
2022 年累计访问
PR
特别感谢 JetBrains 为开源项目提供免费的 WebStorm 授权