Hexo博客Next主题加入音乐播放器-SQPlayer

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 874 阅读时长 ≈ 3 分钟

SQPlayer一个简洁到极致的单曲播放器。代码由奇趣保罗(https://paugram.com)原创，并遵守 MIT 开源协议。

下载播放器

网址：github.com

解压找到需要的文件：SQPlayer.js和SQPlayer.css

安装播放器

将SQPlayer.js​放到博客对应的\node_modules\hexo-theme-next\source\js​文件夹下。

将SQPlayer.css​放到博客对应的\node_modules\hexo-theme-next\source\css​文件夹下。

修改文件

修改SQPlayer.css​样式，使其适合主题侧边栏。

1
2
3
4
5
6
7
8
9
10
11
12
13
sqp {
    width: 15em;
    height: 8em;
    color: #fff;
    float: right;
    display: block;
    overflow: hidden;
    user-select: none;
    position: relative;
    border-radius: 0em;
    margin: 0 0 1em 1em;
    background: #c8cae1 center/cover no-repeat;
}

修改SQPlayer.js​

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
setupByCloudMusic = (cid, server) => {
    const getData = {
      "moeyao": () => (
        fetch(`https://api.moeyao.cn/meting/?server=tencent&type=playlist&id=${cid}`).then(
          (res) => res.json()
        ).then((items) => {
          const item = items[0];

          if (!item) {
            throw new Error("返回数据为空");
          }

          this.setup({
            title: item.name,
            artist: item.artist,
            cover: item.cover,
            link: item.url
          });
        })
      ),
      // "paul": () => (
      //   fetch(`https://api.paugram.com/netease/?id=${cid}`).then(
      //     (res) => res.json()
      //   ).then((item) => {
      //     this.setup(item);
      //   })
      // ),
    };

把CSS引入到生成的主页中

需要在在网页 head​ 标签引用项目的 CSS 文件 SQPlayer.css​：

1
2
3
4
5
<head>
...
<link href="SQPlayer.css" rel="stylesheet" type="text/css"/>
...
</head>

修改\node_modules\hexo-theme-next\layout\_layout.njk​文件，添加<link href="SQPlayer.css" rel="stylesheet" type="text/css"/>​

​​

引入JS

hexo\node_modules\hexo-theme-next\layout\_scripts\index.njk

放置到侧边栏

在网页 body​ 标签内的最后一行，或使用 defer​ 属性引用项目的 JS 文件 SQPlayer.js​。

如果使用 data-cid​ 属性引用播放器，就写成这样，其中 23682511​ 就是网易云音乐一首歌的 ID。

1
2
3
4
5
<body>
...
<sqp data-cid="23682511"></sqp> # data-cid指定了歌曲ID，这里是tencent QQ音乐源
<script src="SQPlayer.js"></script>
</body>

修改\node_modules\hexo-theme-next\layout_macro\sidebar.njk​文件，添加<script src="SQPlayer.js"></script>​

修改 \node_modules\hexo-theme-next\layout_macro\sidebar.njk​文件，添加<sqp data-cid="2112569740"></sqp>​

​​

在网页 body ​标签内插入一个 sqp​ 标签：

1
2
3
4
5
<body>
...
<sqp></sqp>
...
</body>

如果使用静态方法引用播放器，则需要同时编写四个属性。

1
<sqp data-title="Crimson & Clover" data-artist="Tommy James" data-cover="封面链接" data-link="歌曲链接"></sqp>

其他属性可以参考本文档的 属性 节点。

属性

Square Player 支持以下属性，它们分别的意义是：

属性名 用途
left 至左显示
data-title 歌曲名，用于自定义歌曲
data-artist 艺术家，用于自定义歌曲
data-cover 专辑封面图片链接，用于自定义歌曲
data-link 歌曲地址，用于自定义歌曲
data-cid 网易云音乐的 ID，如果编写了此项目，将忽略以上 data-*设置

将以上属性放在<sqp>​ 标签内即可生效。

修改歌曲-网易云

歌单ID

打开网易云找到喜欢的歌单，浏览器地址栏会显示ID

将该ID填写到https://api.moeyao.cn/meting/?type=playlist&id=连接中，可查看到返回的Json数据。

可以根据返回的歌单Json在html页面的body中手动修改成喜欢的单曲。无需改动SQPlayer.js

1
<sqp data-title="라라라" data-artist="淑熙" data-cover="https://api.moeyao.cn/meting/?server=netease&type=cover&id=5357743" data-link="https://api.moeyao.cn/meting/?server=netease&type=url&id=5357743"></sqp>

此外，也可以通过修改SQPlayer.js文件来引用单曲。

首先，在html页面的body中引用歌单id

1
<sqp data-cid="6846019260"></sqp>

还要修改SQPlayer.js文件，

  • fetch()

  • const item = items[0];中[0]表示第一首歌，依此类推，选择对应的单曲

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
setupByCloudMusic = (cid, server) => {
  const getData = {
    "moeyao": () => (
      fetch(`https://api.moeyao.cn/meting/?type=playlist&id=${cid}`).then(
        (res) => res.json()
      ).then((items) => {
        const item = items[0]; // 获取list第一首歌曲
        if (!item) {
          throw new Error("返回数据为空");
        }

        this.setup({
          title: item.name,
          artist: item.artist,
          cover: item.cover,
          link: item.url
        });
      })
    ),
    // "paul": () => (
    //   fetch(`https://api.paugram.com/netease/?id=${cid}`).then(
    //     (res) => res.json()
    //   ).then((item) => {
    //     this.setup(item);
    //   })
    // ),
  };

参考

Square Player 文档