关于
在hexo博客上加入音乐,Aplayer插件
先上效果图
-
准备
APlayer,下载github压缩包,解压后把dist文件夹复制到\themes\你的主题\source目录中。 -
在dist目录里,新建music.js文件,并把如下代码粘贴进去。
var aplayers = [],
loadMeting = function() {
function a(a, b) {
var c = {
container: a,
audio: b,
mini: null,
fixed: null,
autoplay: !1, //控制自动播放
mutex: !0,
lrcType: 3,
listFolded: !1,
preload: 'auto',
theme: '#2980b9',
loop: 'all',
order: 'list',
volume: null,
listMaxHeight: null,
customAudioType: null,
storageName: 'metingjs'
};
if (b.length) {
b[0].lrc || (c.lrcType = 0);
var d = {};
for (var e in c) {
var f = e.toLowerCase();
(a.dataset.hasOwnProperty(f) || a.dataset.hasOwnProperty(e) || null !== c[e]) && (d[e] = a.dataset[f] || a.dataset[
e] || c[e], ('true' === d[e] || 'false' === d[e]) && (d[e] = 'true' == d[e]))
}
aplayers.push(new APlayer(d))
}
}
var b = 'https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r';
'undefined' != typeof meting_api && (b = meting_api);
for (var f = 0; f < aplayers.length; f++) try {
aplayers[f].destroy()
} catch (a) {
console.log(a)
}
aplayers = [];
for (var c = document.querySelectorAll('.aplayer'), d = function() {
var d = c[e],
f = d.dataset.id;
if (f) {
var g = d.dataset.api || b;
g = g.replace(':server', d.dataset.server), g = g.replace(':type', d.dataset.type), g = g.replace(':id', d.dataset
.id), g = g.replace(':auth', d.dataset.auth), g = g.replace(':r', Math.random());
var h = new XMLHttpRequest;
h.onreadystatechange = function() {
if (4 === h.readyState && (200 <= h.status && 300 > h.status || 304 === h.status)) {
var b = JSON.parse(h.responseText);
a(d, b)
}
}, h.open('get', g, !0), h.send(null)
} else if (d.dataset.url) {
var i = [{
name: d.dataset.name || d.dataset.title || 'Audio name',
artist: d.dataset.artist || d.dataset.author || 'Audio artist',
url: d.dataset.url,
cover: d.dataset.cover || d.dataset.pic,
lrc: d.dataset.lrc,
type: d.dataset.type || 'auto'
}];
a(d, i)
}
}, e = 0; e < c.length; e++) d()
};
document.addEventListener('DOMContentLoaded', loadMeting, !1);
- 在\themes\你的主题\layout\music.ejs(其他的swig,pug等按照其格式添加,新建的music.ejs)文件中里新增如下代码:
<link rel="stylesheet" href="<%- url_for('css/APlayer.min.css') %>">
<script src="<%- url_for('js/APlayer.min.js') %>"></script>
<div id="aplayer" class="aplayer" data-id="459792285" data-server="netease"
data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="<%- url_for('js/music.js') %>"></script>
- 在\themes\你的主题\layout\layout.ejs文件中,新增如下代码:
<%- partial('_partial/music') %>
然后重新发布一下就可以了
补充:
该插件不支持断点续播,所以当刷新页面的时候音乐会从头开始播放,这是一个问题,当然如果是只想要作用在单页面的话,是完全没问题的。
如果想要让它实现断点续播的话,需要pjax。这里就不细说,需要的自行查阅。
Aplayer 中文文档