我的博客使用的下项目：APlayer
项目目录
我们只需要dist文件里的css和js，把dist复制到hexo主题的模板文件中，比如我的路径是：G:\blog\themes\replica\source\dist
配置music.js
进入dist，这里还需要对播放列表，模式等进行配置，APlayer是通过脚本控制播放的；新建一个脚本music.js,配置代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
mini: true,
autoplay: false,
volume: true,
audio: [
{
name: "春、恋、花以外の（Cover：匀子）",
artist: '茶玖 / 熊太kuma / 池树',
url: '/bg.mp3',
cover: '/bg.jpg',
},
]
});
|
url可以写网络路径，也可以把你放的背景音乐下载到source内；填你的本站路径，当然如果想添加比较多的话就不建议这么做；配置不懂的可以去查官方文档
添加到网页
加下列代码添加到模板中，完成
1
2
3
4
5
| <!-- 加入APlayer音乐播放器 -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
|
缺点
添加一两首音乐还可以，如果要添加一个列表还要一条条添加就显得不够优雅，可以考虑写脚本自动生成对应的配置代码