宝塔面板搭建音乐播放器

本文最后更新于:2024年9月7日 上午

1.搭建后台 api 服务

1.1下载网易云音乐 Node.js API service

  • 方式一:git下载
    1
    git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
  • 方式二:Github地址
    1
    https://github.com/Binaryify/NeteaseCloudMusicApi

1.2安装依赖包

  在下载的文件的根目录下右键Git Bash Here,输入以下命令

1
2
#如果报错,请自行百度安装nodejs和npm
npm install

  成功后大概会是下面这样

1.3部署至服务器端

  将该目录文件进行打包,上传至目录/www/wwwroot,将上传的NeteaseCloudMusicApi压缩包解压至目录/www/wwwroot/NeteaseCloudMusicApi

1.4下载安装PM2管理器

  宝塔面板左侧搜索PM2,然后安装。

1.5添加部署项目

  点击PM2配置添加项目

1
2
3
4
#启动文件填写
/www/wwwroot/NeteaseCloudMusicApi/app.js
#运行目录填写
/www/wwwroot/NeteaseCloudMusicApi

  然后就可以看到项目成功运行(默认端口为3000端口,在服务器和宝塔面板同时放行)

  点击算端口设置,监听端口设置为3000

1.6域名绑定(非必须)

  点击右侧映射,填写已经解析好的域名,更目录填写运行目录/www/wwwroot/NeteaseCloudMusicApi

  此时,宝塔面板网站页面会多出一个你刚刚配置的域名的网站,点击SSL,为其添加SSL证书,如若使用宝塔申请SSL证书,请先关闭反向代理,待SSL配置成功之后再重新开启反向代理。此时,访问绑定的域名,如果出现下面这样的页面,则说明 api 部署成功!

2.部署前端页面

2.1本地工作

2.1.1下载 Vue-mmPlayer

  • 方式一:git下载
    1
    git clone https://github.com/maomao1996/Vue-mmPlayer.git
  • 方式二:Github地址
1
https://github.com/maomao1996/Vue-mmPlayer

2.1.2安装依赖包

  在下载的文件的根目录下右键Git Bash Here,输入以下命令

1
2
#如果报错,请自行百度安装nodejs和npm
npm install

2.1.3配置

  将 .env 文件的 VUE_APP_BASE_API_URL 地址修改为刚刚部署的 API 服务地址;访客统计VUE_APP_VISITOR_BADGE_ID可不用管,PS:访客统计详情参考:https://github.com/jwenjian/visitor-badge

2.1.4编译打包

1
npm run build

  运行完成后,将此文件重新压缩。

2.2服务器端工作

2.2.1创建网站

  在宝塔面板左侧选择网站,创建新的网站,域名填写解析好的该音乐网站域名,目录随意。

2.2.2上传

  将压缩包上传至目录刚刚创建的网站目录下,将上传的Vue-mmPlayer压缩包解压至此目录,打开文件夹进入dist目录,剪切dist目录下的所有文件,粘贴至创建的该网站目录下。

2.2.3部署SSL

  如若想网站以https访问,则需要配置SSL证书,方法同上。

  此时,访问配置的音乐网站的域名即可正常访问,前端UI自行修改即可。

3.部分UI修改

  百度统计, 在本地文件 /Vue-mmPlayer/public/index.html

1
2
3
4
//大概142
//从?后边开始替换
https://hm.baidu.com/hm.js?xxxx
//如若没有,注册地址https://tongji.baidu.com/web5/welcome/login

  阿里图标引入也是在此文件

1
2
//大概22行
<link rel="stylesheet" href="//at.alicdn.com/t/font_1367495_eza6utwbiqn.css" />

  主页右侧github图标及部分文字修改,/Vue-mmPlayer/src/components/lyricl/lyric.vue

1
2
3
4
5
//大概16行
<a class="hover" target="_blank" href="https://alvie.cn">
<!-- <mm-icon type="github" :size="14" /> -->
&nbsp;Alvie
</a>

  进度条上方文字,/Vue-mmPlayer/src/pages/music.vue

1
2
//大概32行
<template v-else>欢迎使用Alvie在线音乐播放器</template>

/Vue-mmPlayer/src/components/mm-header/mm-header.vue

1
2
//大概148行
this.$mmToast(`${this.user.nickname} 欢迎使用 Alvie`)

  主页访客统计旁标题,直接更改会报错,可修改编译后的文件/Vue-mmPlayer/dist/js/app-legacy.04e69cd5.js和/Vue-mmPlayer/src/dist/js/app.783a22f4.js ps:控制台信息并未修改。

  动态标题修改,/Vue-mmPlayer/src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//大概49行
// 设置title
let OriginTitile = document.title
let titleTime
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
document.title = '为人民某幸福!'
clearTimeout(titleTime)
} else {
document.title = '为民族谋复兴!'
titleTime = setTimeout(function () {
document.title = OriginTitile
}, 2000)
}
})