本想加入网易云音乐的插件,但是由于强迫症始终不满意,直到我找到了 Aplayer 插件。
效果
准备
进入 Aplayer 网页,下载 GitHub 压缩包并解压,将其中的 dist 文件夹移动到\themes\你的主题\source目录下
修改
在 dist 目录中,新建
music.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
25const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: false,
audio: [
{
name: "心做し",
artist: 'papiyon',
url: 'http://music.163.com/song/media/outer/url?id=29747157.mp3',
cover: 'http://p1.music.126.net/DeLlqBZXRBBrVPw_ahUl5g==/3239161256372551.jpg',
},
{
name: 'aLIEz',
artist: 'mizuki / SawanoHiroyuki[nZk]',
url: 'http://music.163.com/song/media/outer/url?id=29307041.mp3',
cover: 'http://p2.music.126.net/FahHKWzpgA5t9hIaj4kbBQ==/6649846324993045.jpg',
},
{
name: 'LOSER',
artist: '米津玄師',
url: 'http://music.163.com/song/media/outer/url?id=512359195.mp3',
cover: 'http://p2.music.126.net/A-VUmkAaUVQ88iXBrsbQ1A==/109951163561900568.jpg',
}
]
});在
\themes\你的主题\layout\layout.ejs文件中,新增如下代码1
2
3
4
5<!-- 音频播放 -->
<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>
重新发布后便能在网页左下角看到播放器,其它可参考 Aplayer 中文文档。