Hexo主题增加音乐之APlayer音乐播放功能

关于

在hexo博客上加入音乐，Aplayer插件

演示地址

先上效果图

1. 准备
   APlayer，下载github压缩包，解压后把dist文件夹复制到\themes\你的主题\source目录中。

2. 在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);

3. 在\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>

4. 在\themes\你的主题\layout\layout.ejs文件中，新增如下代码：

 <%- partial('_partial/music') %>

然后重新发布一下就可以了

补充：

该插件不支持断点续播，所以当刷新页面的时候音乐会从头开始播放，这是一个问题，当然如果是只想要作用在单页面的话，是完全没问题的。
如果想要让它实现断点续播的话，需要pjax。这里就不细说，需要的自行查阅。
Aplayer 中文文档