前言

国庆假期刚结束，终于有时间更新一下了。最近突然发现MetingJs音乐播放器插件不能获取网易云的音乐，F12一打开就满屏红字报错。抱着试一试的心态，我在本地用 ping 测了一下获取音乐信息的 API，果不其然，请求超时了。
img.png
看来是没办法了，只能去 GitHub 上翻一下 MetingJs 的源码。仔细检查后发现，这个音乐播放器插件其实是前端 Node 组件和后端 API 组成的。既然有 API，那就意味着可以自己搭建后端服务。问题是，原作者的后端 API 是用 PHP 写的，对我这个没学过 PHP 的人来说有点麻烦啊。

不过幸好，有大佬用 JavaScript 重写了一版后端，项目地址：https://github.com/xizeyoupan/Meting-API。这下不用折腾 PHP，终于可以放心大胆地用 JS 来搞定。

折腾

启动

这个项目需要 Node.js 版本 18 以上，代码下载好后，有两种方式来启动项目：

1）第一种方式：把代码下载到服务器，然后直接用 npm run start:node 启动。默认的端口号在 ../src/config.js 文件里可以自行修改。

2）第二种方式：使用 Deno（Deno 是 JavaScript 和 TypeScript 的运行时环境，感兴趣的朋友可以自行了解）。在 Linux 上安装 Deno 很简单，运行以下命令即可：

1
curl -fsSL https://deno.land/x/install/install.sh | sh

安装好之后，可以查看 Deno 版本：

1
deno -v

查看使用方法

1
deno --help

Deno安装位置：/root/.deno
img_1.png
安装完 Deno 后，咱们需要把原始项目打包，使用以下命令打包：

1
npm run build:all

打包完成后，会生成一个 deno.js 文件，路径是 …/src/dist/deno.js，接着运行以下命令启动：

1
npm run start:deno

个人比较推荐第二种方式，易于管理，另外这些命令可以在 package.json 里自行调整。

代理

在用 Nginx 代理这个服务的时候，需要设置 X-Forwarded-Host 请求头。注意在 X-Forwarded-Host 后面加上 location 的转发路由，如下示例：

1
2
3
4
5
6
7
8
9
server {
   listen       8099;
   server_name  localhost;

   location /music/ {
      proxy_pass http://localhost:3010/;
      proxy_set_header X-Forwarded-Host $scheme://$host:$server_port/music;
   }
}

如果你用的是 HTTPS 协议，可以把 X-Forwarded-Host 里的 $server_port 省略掉：

1
2
3
4
5
6
7
8
9
10
server {
   listen       443 ssl;
   server_name  xxx.com;
   ......此处省略

   location /music/ {
      proxy_pass http://localhost:3010/;
      proxy_set_header X-Forwarded-Host $scheme://$host/music;
   }

测试

当项目启动成功、Nginx 代理配置好后，访问你配置的域名或者链接地址，应该能看到如下页面：
img-1.png
访问测试地址，如出现以下页面并且歌曲加载正常，就说明部署成功了。
img_3.png

配置

最后，在你需要展示音乐播放器的地方，插入以下代码：

1
2
3
<script>
    var meting_api='{Nginx代理链接或者域名}/api?server=:server&type=:type&id=:id&auth=:auth&r=:r';
</script>

img_5.png
注意：原始项目作者同时更换了Meting.min.js插件，本次教程仅仅替换了Meting.min.js调用的后端API，正常来说无需替换插件，请根据具体情况调整。

结语

总的来说，整个过程不算复杂，但一些细节还是要留心处理。好了，折腾到这儿，咱们下次见！
35.png