基于Vue2的在线音乐播放器(PC) ,模仿 QQ 音乐网页版界面,采用 flexbox
和 position
布局; mmPlayer 虽然是响应式,但主要以 PC 端为主,移动端只做相应适配(未做歌词显示)。
这篇文章基于宝塔面板来倒腾这个玩意,所以没有宝塔的,赶紧去安装一个,如果你没有宝塔的账号,那么需要赶紧申请一个。(宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取https://www.bt.cn/?invite_code=MV9ub2NxdmI=)
前面介绍过类似文章,可以参考:
1、简介
- 项目:https://github.com/maomao1996/Vue-mmPlayer
- api项目:https://github.com/Binaryify/NeteaseCloudMusicApi
- 文档:https://github.com/maomao1996/Blog/issues/1
- 演示:https://music.mtnhao.com
额,珍惜吧,说不定哪一天就看不到了,推荐fork下,自己留一份。
2、准备
宝塔面板安装好
PM2管理器安装好(软件商店里面自行安装)
准备一个域名
nginx安装好
3、部署后台 API 服务
3.1 下载
开整之前,先部署api,第一步中已经给我出了项目地址,我们直接clone即可,命令如下。
cd /www/wwwroot git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
下载的文件放在/www/wwwroot
目录下,这个放在那里随意,大鸟博客只是习惯放这里了。
3.2 启动api服务
- 安装 PM2 管理器(
软件商店 - 运行环境安装
) - 点击PM2 管理器开始设置
- 选择刚刚上传的
NeteaseCloudMusicApi
项目的目录 - 输入
app.js
和 项目名称NeteaseCloudMusicApi
- 点击
添加
- 放行端口:
安全
,添加 api 服务的端口默认 3000
看一张图秒懂。
3.3 验证
浏览器中打开ip:3000可以访问,表示安装成功,如图:
3.4 设置域名
如果你需要给你的api设置一个域名,那么点击映射,输入域名即可。
如果你要设置ssl访问,那么映射之后,请先网站设置中关掉反向DL,然后申请ssl免费证书,申请之后从新打开反向DL。
4、部署 Vue-mmPlayer 服务
api后端设置好之前,我们开始部署前端服务。
4.1 下载和编译
注意:修改env文件中的api服务地址,就是你在第三步中设置的api,不是默认的。将编译打包好的dist
目录中的静态文件直接转移至宝塔面板的 /www/wwwroot/你新建的站点
目录下。4.2 访问
浏览器访问你的域名即可看到效果,刚打开会有更新提示,如图:
正在播放效果。
排行榜:
歌曲评论:
5、登录
播放器支持在线登录,步骤如下:
- 打开网易云音乐官网(http://music.163.com)
- 点击页面右上角的“登录”
- 点击您的头像,进入我的主页
- 复制浏览器地址栏 /user/home?id= 后面的数字(网易云 UID)
- 复制得到的网易云 UID到mmPlayer提供的登录框即可。
6、最后
mmPlayer和前面的介绍的vue-netease-music可以根据喜好安装,都不错,不过大鸟更喜欢mmplayer。
主要功能如下:
- 播放器
- 快捷键操作
- 歌词滚动
- 正在播放
- 排行榜
- 歌单详情
- 搜索
- 播放历史
- 查看评论
- 同步网易云歌单

QQ群:661988897
telegram群:https://t.me/daniaoboke
telegram频道:https://t.me/daniaoboke_channel
2020年7月25日 下午7:59 31F
mark,回头来装装看!
2020年7月25日 下午8:00 32F
看不到啊,博主赶快审核,急要!
2020年7月25日 下午8:07 33F
为啥最关键的信息看不到呢??这个编译要怎么编译啊?
2020年7月29日 上午3:14 34F
可以解锁灰色歌曲吗
2020年8月5日 下午1:47 35F
看看怎么编译
2020年8月12日 下午6:02 36F
我按照您的步骤一步一步来,发现有问题,pm2管理器的项目启动不了,附上图片您看看
2020年8月12日 下午6:16 B1
@ Ray 这样看不出来啥错误,你多试试呢?
2020年8月25日 下午10:34 37F
看看怎么编译 求审核
2020年8月28日 下午5:21 38F
运行后有了提示,还是无法访问的状态,8080端口已经打开了,哭死!!
2020年8月28日 下午5:22 39F
楼上,关了防火墙就行了!
2020年9月10日 下午8:17 40F
就是拿着VUE的源码也不知道如何布置
2020年11月19日 下午3:22 41F
感谢博主
2020年11月24日 下午5:15 42F
博主最棒
2020年12月2日 下午11:42 43F
这个是好东西值得看安康
2020年12月2日 下午11:56 44F
后端是什么啊,不是就只有前段啊
2020年12月3日 下午9:28 45F
mark,回头来装装看!
2021年1月3日 上午11:40 46F
我来看看
2021年1月3日 上午11:41 47F
要先把依赖先安装的 npm i
2021年1月9日 下午12:37 48F
顶顶顶顶顶顶老大
2021年1月9日 下午12:38 49F
感谢,这个很有用!!