使用阿里云函数计算免费创建自己的音乐播放器API

使用阿里云函数计算免费创建自己的音乐播放器API

三月 06, 2021

这篇文章将一步一步的带你搭建一个播放器，也就是提供GET请求，返回一个带有播放器的网页，

你可以用 iframe 元素将这个播放器嵌入任何支持HTML语法的地方（MarkDown支持全部HTML语法）。

这个过程几乎是免费的，除非你的需求很大。当然，只是嵌入自己的文章的话，阿里云提供的免费额度是肯定够用的。

感谢APlayer的作者！

当然，利用这种方法，你可以做出许多有趣的API，快试试吧~

写在前面

目标

写一个GET请求API，参数自己设计，根据参数自动生成对应的歌曲的音乐播放器页面。

准备工作

首先，你需要

  • 一个已经备案的域名
  • 一个阿里云账号

此外，技术栈：

  • 有 JavaScript 基础
  • 了解 ejs 模板引擎，非必要，只是用来生成HTML代码

完成示例

例如这个网页GitHub+JsDeliver大法

1
https://music.luotianyi.space:19375/?_=|https://cdn.jsdelivr.net/gh/skyone-res/static@master/res/music/夜航星%20-%20洛天依.mp3|https://ooo.0x0.ooo/2021/02/14/o08AS.png||https://cdn.jsdelivr.net/gh/skyone-res/static@master/res/lrc/夜航星%20-%20洛天依.lrc

你可以将其嵌入你的文章，例如本篇文章开头的音乐播放器就是这么实现的。

写代码

看文档

我们使用Node.js开发HTTP函数，首先看看文档吧：https://help.aliyun.com/document_detail/74757.html

文档总结：

入口函数：function(request, response, context)

其中：

  1. request

    字段 类型 描述
    headers Object类型 存放来自HTTP客户端的键值对。
    path String类型 表示HTTP路径。
    queries Object类型 存放来自HTTP路径中的查询部分的键值对，值的类型可以为字符串或数组。
    method String类型 表示HTTP方法。
    clientIP String类型 客户端的IP地址。
    url String类型 请求的地址。

    简单易懂，我就不多说了。

  2. response

    我们的目标很简单：组装一个网页并返回，所以我们只需要知道，返回网页有以下步骤

    • 使用 response.setStatusCode("200") 设置HTTP状态码为200，参数是字符串
    • 使用 response.setHeader("Content-Type", "text/html") 提醒浏览器我们返回的是HTML代码
    • 使用 response.send("返回的网页代码") 设置返回的HTML代码

  3. context

    上下文，别问，我也不懂

了解这么多就够了，例子太复杂，就不看了

写模板

打开你的IDE，比如我用的WebStorm学生党的除了没钱福利还是很多滴，感谢JetBrains！

新建ejs模板文件 music.ejs ，写个简单的模板，比如用APlayer这个轮子，如果不会或者懒就直接复制我的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Skyone - MusicPlayer</title>
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <style>
        html::-webkit-scrollbar { display: none }
    </style>
</head>
<body style="margin: 0">
<div id="player"></div>
<script>
    const ap = new APlayer({
        container: document.getElementById('player'),
        listFolded: true,
        listMaxHeight: 70,
        lrcType: 3,
        audio: [
            <% for (let music of list) { %>
            {
                name: "<%= music.name %>",
                artist: "<%= music.artist %>",
                url: "<%= music.url %>",
                <% if (music.cover)  { %>
                cover: "<%= music.cover %>",
                <% } %>
                <% if (music.lrc)  { %>
                lrc: "<%= music.lrc %>",
                lrcType: 3,
                <% } %>
            },
            <% } %>
        ]
    });
</script>
</body>
</html>

安装Node.js的包

CMD打开文件夹，输入以下命令来安装ejs，有cnpm的改用cnpm，不懂就复制粘贴

1
npm install ejs

主函数

咳，主函数就一个函数，创建文件index.js ，导入ejs

1
2
3
const ejs = require("ejs");
const fs = require("fs");
const path = require("path");

先写入口函数，根据你设计的GET请求API分析GET参数，把参数处理成对应的ejs数据，例如我给的ejs模板需要：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const list = [
    {
        name: "歌曲名称",
        url: "歌曲链接",
        cover: "专辑图片链接，可空" || null,
        artist: "歌手，可空" || "未知",
        lrc: "lrc歌词，可空" || null
    }, {
        name: "夜航星",
        url: "https://cdn.jsdelivr.net/gh/skyone-res/static@master/res/music/夜航星%20-%20洛天依.mp3",
        cover: "https://ooo.0x0.ooo/2021/02/14/o08AS.png" || null,
        artist: "洛天依" || "未知",
        lrc: "https://cdn.jsdelivr.net/gh/skyone-res/static@master/res/lrc/夜航星%20-%20洛天依.lrc" || null
    },
]

然后，设置header和statuscode，使用ejs模板生成网页并调用 send()

1
2
3
response.setStatusCode("200");
response.setHeader("Content-Type", "text/html");
response.send(ejs.render(fs.readFileSync(path.join(__dirname, "music.ejs")).toString(), { list }));

同样，我给个完整的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
"use strict";

const path = require("path")
const ejs = require("ejs")
const fs = require("fs")


exports.handler = (req, res, context) => {
    res.setHeader("Content-Type", "text/html")
    const params = {
        path: req.path,
        queries: req.queries,
        headers: req.headers,
        method: req.method,
        requestURI: req.url,
        clientIP: req.clientIP,
    };
    if (params.queries['_'] && params.queries["_"].indexOf("|") === -1) {
        res.setStatusCode('400');
        res.send("Params Error")
    }

    try {
        const data = params.queries["_"].split("^")
        let list = [];
        for (let i of data) {
            const query = i.split("|")
            list[list.length] = {
                name: query[0],
                url: query[1],
                cover: query[2] || null,
                artist: query[3] || "未知",
                lrc: query[4] || null
            };
            let filename = query[1].split("/").pop().split(".")[0].split(" - ");
            try {
                if (filename.length === 2) {
                    list[list.length - 1].name = filename[0];
                    list[list.length - 1].artist = filename[1];
                }
            } catch (e) {
                res.setStatusCode(503);
                res.send(e);
                return;
            }
        }

        res.setStatusCode(200);
        res.send(ejs.render(fs.readFileSync(path.join(__dirname, "music.ejs")).toString(), { list }));
    } catch (e) {
        res.setStatusCode(503);
        res.send("Server Error");
    }
}

我的API的参数

就一个 _ ，值为：

1
名称(支持根据url自动获取:歌曲-歌手.xxx)|歌曲url|专辑图片url|歌手(支持根据url自动获取)|歌词url

多首歌通过 ^ 分隔，例如：

1
?_=|https://cdn.jsdelivr.net/gh/skyone-res/static@master/res/music/%E5%A4%9C%E8%88%AA%E6%98%9F%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D.mp3|https://ooo.0x0.ooo/2021/02/14/o08AS.png||https://cdn.jsdelivr.net/gh/skyone-res/static@master/res/lrc/%E5%A4%9C%E8%88%AA%E6%98%9F%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D.lrc

保存、打包

保存，退出IDE，进入文件夹

将该文件夹下所有文件加入一个压缩包

开通阿里云函数计算 Function Compute

登录你的阿里云账号，进入此网页开通。

阿里云函数计算计费项及其免费额度如下表：

计费项 价格 免费额度
调用次数（次） 0.00000133（元） 1,000,000（次）
执行时间（CU-秒） 0.000110592（元） 400,000（CU-秒）
函数内数据传输流量 0.8（元） 0
函数请求响应流量 0.5（元） 0
CDN回源流量 0.5（元） 0

我们使用的流量小到几乎可以忽略不计。。。

选择 服务及函数–>新增服务

新增服务
  • 服务名称：随意
  • 描述：可填可不填
  • 绑定日志：如果开启了日志服务可以勾选，同样有免费额度
  • 链路追踪不开启我穷，没钱

如果开启了绑定日志，可能会让你授权，点击确认即可。

新增服务-表单

然后新增函数–>HTTP函数

新增函数
  • 函数名：随意
  • 环境：默认即可
  • 上传代码，选择之前的压缩包
  • 函数入口：格式文件.函数名
  • 打开高级设置
  • 选弹性实例我没钱
  • 运行内存：最小的128MB都太多，10MB都不需要
  • 超时时间：大于1秒即可
  • 触发器名称：随意
  • 认证方式：anonymous
  • 请求方式：改为GET
新增函数-表单

进入该函数，选择触发器，复制链接

触发器链接

打开浏览器，粘贴链接，并在后面加上你的GET请求参数，我的例子可以用：

1
?_=|https://cdn.jsdelivr.net/gh/skyone-res/static@master/res/music/%E5%A4%9C%E8%88%AA%E6%98%9F%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D.mp3|https://ooo.0x0.ooo/2021/02/14/o08AS.png||https://cdn.jsdelivr.net/gh/skyone-res/static@master/res/lrc/%E5%A4%9C%E8%88%AA%E6%98%9F%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D.lrc

如果一切正常，会自动下载一个文件，用编辑器打开发现是对应的HTML代码，好的，进入下一步

配置域名

选择自定义域名–>创建域名

输入你的已经备案的域名，需要开启HTTPS的自行百度这么申请SSL证书

路径填 / ，当然你懂的话自行修改

选择函数为刚才创建的，LATEST版

自定义域名

点确定后，进入你的域名服务商的域名解析控制台，为你的主域名添加对应的子域名，选择CNAME模式，指向上图复制的链接。

测试

打开如下网址

1
http://你的域名/你的get请求参数

显示播放器即为成功。

嵌入网页：

1
<iframe style="border:none:width:100%;height:110px;" href="http://你的域名/你的get请求参数"></iframe>

示例链接

你可以用我建好的API试试

  • URL：https://music.luotianyi.space
  • 参数在这一段有写

例图：

例图

注意：不保证我提供的示例会稳定运行，如果我发现有很多来自非我网站的调用，我会停止此API，所以，想要就自己动手，不要什么事都让被人给你做好！

本文完全原创，禁止转载，如果真的想转载，请邮箱联系我。

  1. 1. 写在前面
    1. 1.1. 目标
    2. 1.2. 准备工作
    3. 1.3. 完成示例
  2. 2. 写代码
    1. 2.1. 看文档
    2. 2.2. 写模板
    3. 2.3. 安装Node.js的包
    4. 2.4. 主函数
    5. 2.5. 我的API的参数
    6. 2.6. 保存、打包
  3. 3. 开通阿里云函数计算 Function Compute
  4. 4. 配置域名
  5. 5. 测试
  6. 6. 示例链接