为博客添加音乐播放器

原本我在博客中使用的是hexo-tag-aplayer, 但是它的需要手动设置歌曲的资源, 包括歌, 歌词, 以及歌曲封面……实在是麻烦! 那么有没有办法能直接导入歌单中的歌曲信息呢? 当然有了!
它就是 MetingJS, A powerful plugin connect APlayer and Meting

MetingJS的使用

根据 MEthingJS 的官方文档, 要在博客中启用相当的简单, 以网易云音乐为例, 文档中给出的方式是

1
2
3
4
5
6
7
8
9
10
11
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
	server="netease"
	type="playlist"
	id="60198">
</meting-js>

那么我们需要做的就只有两步

  1. 引入依赖
  2. 将歌单信息写入配置文件中

引入依赖

在 _config.fluid.yml 文件的 custom_css 和 custom_js 中添加官方提供的 CDN

1
2
3
4
5
6
7
8
custom_js: 
  # APlayer, MetingJS
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
  - //cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js

custom_css:
  # Aplayer
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css

添加歌单配置信息

在 custom_html 中加入歌单配置

1
2
3
4
5
6
7
8
9
10
11
12
custom_html: 
            <!-- 音乐播放器 -->
            <meting-js
              server="netease"
              type="playlist"
              id="7069797967"
              autoplay="false"
              fixed="true"
              volume="0.1"
              loop="all"
              order="random">
            </meting-js>

配置信息

option default description
id require 歌曲ID / 播放列表ID / 专辑ID / 搜索关键词
server require 音乐平台: 网易云 (netease), 腾讯 (tencent), 酷狗 (kugou), 虾米 (xiami), 百度 (baidu)
type require 类型: 歌曲 (song), 播放列表 (playlist), 专辑 (album), 搜索 (search), 艺术家 (artist)
auto options 音乐链接，支持: 网易云 (netease), 腾讯 (tencent), 虾米 (xiami)
fixed false 启用固定模式
mini false 启用迷你模式
autoplay false 自动播放音频
theme #2980b9 主色调
loop all 播放器循环播放模式，可选值: ‘all’（全部）, ‘one’（单曲）, ‘none’（无循环）
order list 播放器播放顺序，可选值: ‘list’（列表顺序）, ‘random’（随机）
preload auto 预加载设置，可选值: ‘none’（无预加载）, ‘metadata’（仅元数据）, ‘auto’（自动）
volume 0.7 默认音量，注意播放器会记住用户设置，用户自行设置后默认音量将不生效
mutex true 防止多个播放器同时播放，当此播放器开始播放时暂停其他播放器
lrc-type 0 歌词类型
list-folded false 是否在首次加载时折叠播放列表
list-max-height 340px 播放列表最大高度
storage-name metingjs 存储播放器设置的 localStorage 键名

添加完成后执行 Hexo 三连就能看到效果了

1
hexo cl && hexo g && hexo s


对于歌词显示,参照 MetingJS 的 Issue #23, 简单的方式是将 lrc-type改为 "1", 参数配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 音乐播放器 -->
<meting-js
    server="netease"
    type="playlist"
    id="7069797967"
    autoplay="false"
    fixed="true"
    volume="0.1"
    loop="all"
    order="random"
    lrc-type="1" >
</meting-js>

使用注入的方式修改配置文件

虽然直接在页面中修改 HTML 就能使用, 但这相当的不美观! 根据 Fluid 提供的注入方法, 可以实现像主题的配置一样在 _config.fluid.yml 中修改配置信息

编写注入脚本

在博客的根目录下的 scripts 目录的 js 文件中添加以下注入信息

1
2
3
hexo.extend.filter.register('theme_inject', function(injects) {
  injects.head.file('aplayer', 'source/_inject/Aplayer.ejs');
  });

在 source 目录下新建 _inject 目录存放注入模板文件,并新建 Aplayer.ejs 文件并编写: 

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
<%
theme.Aplayer = theme.Aplayer || {};
theme.Aplayer.enable = theme.Aplayer.enable !== undefined ? theme.Aplayer.enable : false;
theme.Aplayer.server = theme.Aplayer.server || '';
theme.Aplayer.type = theme.Aplayer.type || '';
theme.Aplayer.id = theme.Aplayer.id || '';
theme.Aplayer.autoplay = theme.Aplayer.autoplay !== undefined ? theme.Aplayer.autoplay : false;
theme.Aplayer.fixed = theme.Aplayer.fixed !== undefined ? theme.Aplayer.fixed : false;
theme.Aplayer.volume = theme.Aplayer.volume || '';
theme.Aplayer.loop = theme.Aplayer.loop || '';
theme.Aplayer.order = theme.Aplayer.order || '';
theme.Aplayer.auto = theme.Aplayer.auto !== undefined ? theme.Aplayer.auto : false;
theme.Aplayer.mini = theme.Aplayer.mini !== undefined ? theme.Aplayer.mini : false;
theme.Aplayer.theme = theme.Aplayer.theme || '';
theme.Aplayer.preload = theme.Aplayer.preload || '';
theme.Aplayer.mutex = theme.Aplayer.mutex !== undefined ? theme.Aplayer.mutex : false;
theme.Aplayer.lrcType = theme.Aplayer.lrcType || '';
theme.Aplayer.listFolded = theme.Aplayer.listFolded !== undefined ? theme.Aplayer.listFolded : false;
theme.Aplayer.listMaxHeight = theme.Aplayer.listMaxHeight || '';
theme.Aplayer.storageName = theme.Aplayer.storageName || '';
%>

<% if (theme.Aplayer.enable) { %>
  <!-- 渲染播放器 -->
  <meting-js
    server="<%= theme.Aplayer.server %>"
    type="<%= theme.Aplayer.type %>"
    id="<%= theme.Aplayer.id %>"
    autoplay="<%= theme.Aplayer.autoplay %>"
    fixed="<%= theme.Aplayer.fixed %>"
    volume="<%= theme.Aplayer.volume %>"
    loop="<%= theme.Aplayer.loop %>"
    order="<%= theme.Aplayer.order %>"
    auto="<%= theme.Aplayer.auto %>"
    mini="<%= theme.Aplayer.mini %>"
    theme="<%= theme.Aplayer.theme %>"
    preload="<%= theme.Aplayer.preload %>"
    mutex="<%= theme.Aplayer.mutex %>"
    lrc-type="<%= theme.Aplayer.lrcType %>"
    list-folded="<%= theme.Aplayer.listFolded %>"
    list-max-height="<%= theme.Aplayer.listMaxHeight %>"
    storage-name="<%= theme.Aplayer.storageName %>">
  </meting-js>
<% } %>

在配置文件中添加 Aplayer 的配置项

将前面的 CDN 以及 HTML 删除, 然后再 _config.fluid.yml 中添加以下配置项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Aplayer 配置
Aplayer:
  enable: true  # 控制播放器是否启用
  server: netease  # 音乐平台
  type: playlist  # 类型: song, playlist, album, search, artist
  id: 7069797967  # 歌曲ID / 播放列表ID / 专辑ID / 搜索关键词
  autoplay: false  # 是否自动播放
  fixed: true  # 是否启用固定模式
  volume: 0.1  # 默认音量
  loop: all  # 播放循环模式: all, one, none
  order: random  # 播放顺序: list, random
  auto: false  # 是否启用自动音乐链接
  mini: true  # 是否启用迷你模式
  theme: "#2980b9"  # 播放器主色调
  preload: auto  # 预加载设置: none, metadata, auto
  mutex: false  # 是否防止多播放器同时播放
  lrcType: 1  # 歌词类型
  listFolded: true  # 播放列表是否折叠
  listMaxHeight:   # 播放列表最大高度
  storageName:   # localStorage 的键名，用于存储播放器设置

对于配置项, 参照配置信息表格. 若配置项为空, 会使用 Aplayer 和 MetingJS 默认的配置——没错,约定大于配置!

参考资料

Aplayer
MetingJS
MetingJS Issue 歌词默认隐藏 #23
Fluid 注入代码
闪闪の小窝博客

博客 > 美化
#Hexo #Fluid
为博客添加音乐播放器
http://example.com/2024/10/13/为博客添加音乐播放器/
作者
Emberff
发布于
2024年10月13日
许可协议