GXNAS博客

  • 博客首页
    • 注册会员(修改密码后才能登录)
    • 更改会员密码/重置账号密码
  • 博客文章分类
    • NAS
    • 虚拟化技术
    • 路由器
    • 网站
    • Linux
    • Windows
    • IPTV
    • 游戏
    • 资源下载
    • 其他
  • ”零刻迷你主机“玩机教程
    • 零刻EQ12迷你小主机评测
    • 零刻SER5 5500U打造新潮派HTPC
    • 零刻SEi10玩ESXI+群晖NAS+Ubuntu
    • 零刻EQ13化身迷你静音省电的NAS
    • 零刻EQ13部署双软路由教程
    • 零刻ME Mini搭建群晖NAS教程
  • 阿里云盘资源
    • 阿里云盘资源更新日志
    • 阿里云盘资源分享
    • 阿里云盘扩容福利码
  • 【GXNAS网盘】
  • 【GXNAS】免费AI绘图
  • 请博主喝奶茶
GXNAS博客
https://wp.gxnas.com
  1. 首页
  2. 网站
  3. 正文

mmPlayer:一款基于Vue的自适应Web在线音乐播放器

2019年11月5日 9072点热度 1人点赞 0条评论

功能

  • 播放器
  • 快捷键操作
  • 歌词滚动
  • 正在播放
  • 排行榜
  • 歌单详情
  • 搜索
  • 播放历史
  • 查看评论
  • 同步网易云歌单

安装

Github地址:https://github.com/maomao1996/Vue-mmPlayer

1、安装依赖

#Debian/Ubuntu系统
curl -sL https://deb.nodesource.com/setup_10.x | bash -
apt install -y nodejs git screen 

#CentOS系统
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install nodejs git screen -y

2、运行播放器

git clone https://github.com/maomao1996/Vue-mmPlayer.git mmPlayer
cd mmPlayer
#安装依赖
npm install
#开发者运行
npm run serve

访问地址为ip:8080,不过这里是用来调试的,先放着不动,然后再把后端服务器搭建好。

为了避免出现不必要的问题,这里就不直接使用项目中的源码了,直接拉取最新的API。

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
cd NeteaseCloudMusicApi
#安装依赖
npm install
#运行
node app.js

#或者后台运行
screen -dmS api node app.js

后端地址为ip:3000,如果想改其它端口,比如5555,启动命令为set PORT=5555 && node app.js。

3、修改并打包
这里只说下常见的几个修改地方,比如标题、后端api地址修改什么的。

#修改后端api
路径src/config.js,修改const URL = 'http://ip:3000'

#修改标题和提示话语
1.路径src/App.vue和src/components/mm-header/mm-header.vue,
2.路径mmPlayer/public/index.html以及 src/pages/music.vue   自己搜索关键词修改

这里如果你想使用https访问该音乐播放器,那还需要使用https域名反代该api地址,然后将反代后的https域名填进去。

接下来再打开ip:8080查看修改效果,不过一般不在本地是用不了的,所以只看标题和提示啥的就行。

确定没啥问题了,就开始打包,使用Ctrl+C断开运行,使用命令:

npm run build

然后打包后的源码在dist文件夹,这时候就可以将文件夹里的源码丢到自己的网站根目录就可以直接用了,记得后端地址不要挂就行。

最后如果你只是想玩玩,那这里提供一个最快的运行方法,使用命令:

#进入打包好的文件夹
cd dist
#运行端口4567,可自行修改
python -m SimpleHTTPServer 4567

然后访问ip:4567即可,打不开的话就检查下防火墙。

 

项目地址:https://github.com/maomao1996/Vue-mmPlayer

标签: Vue-mmPlayer 网站 音乐
最后更新:2024年5月21日

博主

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论
站内搜索
分类
  • IPTV / 15篇
  • Linux / 34篇
  • NAS / 252篇
  • Windows / 21篇
  • 其他 / 37篇
  • 游戏 / 3篇
  • 网站 / 125篇
  • 虚拟化技术 / 55篇
  • 资源下载 / 2篇
  • 路由器 / 46篇
归档
博客统计信息
  • 128
  • 648
  • 4,907,646
  • 570
  • 16,767
  • 2025年7月8日

© 2025 GXNAS博客 版权所有,未经许可不得转载或引用本站的内容。

Theme Kratos Made By Seaton Jiang

网站备案号:桂ICP备18008717号