# 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
│ │
没有合适的资源?快使用搜索试试~ 我知道了~
基于 Vue 的在线音乐播放器源码+项目说明.zip
共77个文件
js:22个
vue:20个
jpg:11个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 190 浏览量
2024-03-15
00:17:27
上传
评论
收藏 4.53MB ZIP 举报
温馨提示
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip基于 Vue 的在线音乐播放器源码+项目说明.zip
资源推荐
资源详情
资源评论
收起资源包目录
基于 Vue 的在线音乐播放器源码+项目说明.zip (77个子文件)
code_20105
.editorconfig 214B
.browserslistrc 33B
screenshots
2.jpg 598KB
6.jpg 414KB
1.jpg 379KB
5.jpg 376KB
8.jpg 912KB
3.jpg 392KB
7.jpg 845KB
4.jpg 658KB
.vscode
settings.json 24B
extensions.json 93B
babel.config.js 66B
.eslintrc.js 958B
.env 157B
src
pages
music.vue 14KB
playList
playList.vue 2KB
mmPlayer.js 2KB
topList
topList.vue 3KB
details
details.vue 1KB
comment
comment.vue 7KB
historyList
historyList.vue 1KB
search
search.vue 4KB
userList
userList.vue 3KB
App.vue 3KB
store
mutation-types.js 541B
mutations.js 912B
actions.js 3KB
getters.js 650B
index.js 464B
state.js 451B
assets
img
player_cover.png 5KB
wave.gif 622B
album_cover_player.png 3KB
default.png 3KB
background
bg-1.jpg 33KB
bg-2.jpg 46KB
bg-3.jpg 38KB
styles
index.less 2KB
mixin.less 236B
var.less 2KB
reset.less 1KB
main.js 2KB
api
index.js 2KB
utils
song.js 1KB
hack.js 105B
axios.js 505B
storage.js 3KB
util.js 2KB
mixin.js 879B
components
lyric
lyric.vue 4KB
music-btn
music-btn.vue 1KB
volume
volume.vue 2KB
mm-header
mm-header.vue 6KB
music-list
music-list.vue 8KB
base
mm-no-result
mm-no-result.vue 544B
mm-dialog
mm-dialog.vue 5KB
mm-icon
mm-icon.vue 948B
mm-loading
mm-loading.vue 2KB
mm-progress
mm-progress.vue 4KB
mm-toast
mm-toast.vue 1KB
index.js 1KB
config.js 1KB
router
index.js 2KB
.husky
commit-msg 79B
jsconfig.json 536B
package.json 1KB
public
img
warn.png 4KB
prompt.html 1KB
favicon.ico 4KB
index.html 5KB
pnpm-lock.yaml 250KB
vue.config.js 2KB
.gitignore 309B
.npmrc 96B
README.md 19KB
postcss.config.js 61B
共 77 条
- 1
资源评论
土豆片片
- 粉丝: 1557
- 资源: 5641
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功