Hexo 全局添加 APlayer 音乐播放器

相关资源

Yilia 主题整合 APlayer

这里使用的 Hexo 主题是 Yilia,若使用的是其他主题(比如 NexT),整合 APlayer 的步骤都是大同小异。

整合 APlayer

编辑 Yilia 的模版文件 hexo-theme-yilia/layout/_partial/left-col.ejs,在文件的末尾追加以下代码,其中歌曲的歌词文件、封面图片、URL 都可以从通过音乐直链搜索工具获取,也可以直接使用服务器本地资源文件。值得一提的是,如果下面的代码不能将 APlayer 播放器固定到理想的页面位置,可自行修改 div 标签的样式和 APlayer 的 fixed 参数值。

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
<% if(theme.aplayer.enable) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

// 这里div的样式是笔者自己修改过的,你可以直接使用APlayer官方的原配置:<div id="aplayer"></div>
<div id="aplayer" style="position:absolute;left;0;bottom:0;"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
autoplay: false, //自动播放
listFolded: true, //播放列表默认折叠
listMaxHeight: 90, //播放列表最大高度
order: 'list', //音频循环顺序, 可选值: 'list', 'random'
loop: 'all', //音频循环播放, 可选值: 'all', 'one', 'none'
theme: '#e9e9e9', //切换音频时的主题色,优先级低于audio.theme
preload: 'none', //音频预加载,可选值: 'none', 'metadata', 'auto'
mutex: true, //互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
lrcType: 3, //歌词格式,可选值:3(LRC文件歌词格式),1(JS字符串歌词格式)
volume: 0.7, //默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
fixed: false, //吸底模式(fixed:true),迷你模式(mini:true),普通模式(注释此行或者设置fixed:false)
audio: [{
name: '平凡之路',
artist: '朴树',
lrc: '/downloads/lrc/平凡之路-朴树.lrc',
cover: 'http://p2.music.126.net/W_5XiCv3rGS1-J7EXpHSCQ==/18885211718782327.jpg?param=300x300',
url: 'http://fs.open.kugou.com/cd5cbe8edb012e4f77b0857cefc0956e/5c66accf/G097/M08/0A/1F/AYcBAFkQGpOAMUpuAEm-3SlWMyk951.mp3'
},
{
name: '后会无期',
artist: 'G.E.M.邓紫棋',
lrc: '/downloads/lrc/后会无期-G.E.M.邓紫棋.lrc',
cover: 'http://p1.music.126.net/vpvPajo3kn88nHc7jUjeWQ==/5974746185758035.jpg?param=300x300',
url: 'http://m10.music.126.net/20190215193113/e5afc8b5376136029366f2053cf30f85/ymusic/2c87/6ec3/582e/0d572dcc04f8de34133c0f364b74c30c.mp3'
}
]
});

// 实现切换音频时,根据音频的封面图片自适应主题色
const colorThief = new ColorThief();
const setTheme = (index) => {
if (!ap.list.audios[index].theme) {
colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
};
setTheme(ap.list.index);
ap.on('listswitch', (data) => {
setTheme(data.index);
});
</script>
<% } %>

配置 Yilia 主题

编辑 Yilia 主题的配置文件 yilia/_config.yml,在文件末尾追加以下内容。

1
2
aplayer:
enable: true

重新构建博客

提示

若音频文件使用的是本地资源文件,同时通过 hexo server 提供 Web 服务,那么将无法通过 APlayer 的进度条调节播放进度,此时需要使用 Nginx、Apache 等 Web 服务器。简而言之,需要将 Hexo 编译生成的所有静态文件(HTML、CSS、JS),部署到 Nginx 或者 Apache 服务器。

1
2
3
4
5
6
7
8
9
10
11
# 进入博客的根目录
cd /blogroot

# 清理静态文件
hexo clean

# 构建静态文件
hexo generate

# 启动预览服务
hexo server

动态更新歌曲列表

若希望日后方便地动态添加或者删除歌曲,建议将歌曲信息写在单独的 Json 文件里面,然后在 JavaScript 代码初始化 APlayer 音乐播放器时读取 Json 文件,那么日后只需要编辑歌曲的 Json 文件,就可以达到动态更新歌曲列表的目的,本站的音乐播放器使用了该方案。

页面切换后音乐中断播放

当博客的页面切换后,Aplayer 音乐播放器会中断播放(即不能记住播放进度)。解决的办法是使用 Pjax,详细说明请看下方的评论区。

最终实现的效果图

hexo-aplayer-ui