一、前言
为博客添加音乐*放播**器功能，网上有很多种方式，也有很多插件可以用，比如aplayer、dplayer等等。部署方式既可以使用hexo插件，也可以通过提取dist文件的方式。
本人为自己的*放播**选择的aplayer*放播**器，一开始是使用hexo插件的方式，但是部署的时候一直报标签解析的错误，查了好久也没查到原因，无奈，放弃使用插件的方式，改为使用提取aplayer的dist文件的方式。
二、*载下**aplayer
访问aplayer源码：[GitHub Aplayer](https://github.com/MoePlayer/APlayer) ，将文件*载下**到本地，解压后将dist文件夹复制到 /themes/next/source 文件夹下。
三、创建样式
3.1、新建music.js
在/themes/next/source/dist文件夹中新建music.js文件，将下面代码添加进去：
const ap = new APlayer({
container: document.getElementById('aplayer'),
autoplay: false,
loop: 'all',
volume: 0.7,
listFolded: true,
listMaxHeight: 60,
audio: [
{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg',
},
{
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg',
}
]
});
3.2、参数修改
上面代码为你在hexo上生成aplayer*放播**器的样式，参数修改参考 [官方中文文档](https://aplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0) 。
3.3、修改aplayer样式
3.3.1、普通模式：
const ap = new APlayer({
container: document.getElementById('aplayer'),
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg'
}]
});
效果如下：
3.3.2、*放播**列表模式：
const ap = new APlayer({
container: document.getElementById('player'),
listFolded: false,//列表默认折叠
listMaxHeight: 90,//列表最大高度
lrcType: 3, //此为歌词格式，没有歌词可以直接删掉这一行
audio: [
{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg',
lrc: 'lrc1.lrc',
theme: '#ebd0c2'
},
{
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg',
lrc: 'lrc2.lrc',
theme: '#46718b'
}
]
});
效果如下：
3.3.3、吸底模式：
const ap = new APlayer({
container: document.getElementById('player'),
fixed: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});
效果如下：
3.3.4、迷你底模式：
const ap = new APlayer({
container: document.getElementById('player'),
mini: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});
3.4、附上我的参数：
const ap = new APlayer({
container: document.getElementById('aplayer'), //*放播**器容器元素
listFolded: false, //列表默认折叠
listMaxHeight: 90, //列表最大高度
//lrcType: 3, //此为歌词格式，没有歌词可以直接删掉这一行
mini: false, //迷你模式
autoplay: true, //自动*放播**
theme: '#FADFA3', //主题色
loop: 'all', //音频循环*放播**, 可选值: 'all'全部循环, 'one'单曲循环, 'none'不循环
order: 'list', //音频循环顺序, 可选值: 'list'列表循环, 'random'随机循环
preload: 'auto', //预加载，可选值: 'none', 'metadata', 'auto'
volume: 0.7, //默认音量，请注意*放播**器会记忆用户设置，用户手动设置音量后默认音量即失效
mutex: false, //互斥，阻止多个*放播**器同时*放播**，当前*放播**器*放播**时暂停其他*放播**器
audio: [ //音频信息
{
name: '大鱼', //音频名称
artist: '周深、郭沁', //音频艺术家
url: '"http://lc-tguve1gk.cn-n1.lcfile.com/47b5548df9c80bba84f4/%E5%91%A8%E6%B7%B1%E3%80%81%E9%83%AD%E6%B2%81%20-%20%E5%A4%A7%E9%B1%BC%20%282017%E4%B8%AD%E5%9B%BD%E6%96%B0%E6%AD%8C%E5%A3%B0%E7%AC%AC%E4%BA%8C%E5%AD%A3%E7%AC%AC%E5%8D%81%E6%9C%9F%E7%8E%B0%E5%9C%BA%E4%BC%B4%E5%A5%8F%29.mp3', //音频链接
cover: 'http://lc-tguve1gk.cn-n1.lcfile.com/a9fff99abbddc8757d4b/%E5%A4%A7%E9%B1%BC.jpg', //音频封面
//lrc: 'lrc1.lrc', //歌词
theme: '#ebd0c2' //切换到此音频时的主题色，比上面的 theme 优先级高
},
{
name: 'Something just like this',
artist: 'Alex Goot _ Madilyn Bailey',
url: 'http://lc-tguve1gk.cn-n1.lcfile.com/f3bee3260fa207648d34/Alex%20Goot%20_%20Madilyn%20Bailey%20-%20Something%20Just%20Like%20This.mp3',
cover: 'http://lc-tguve1gk.cn-n1.lcfile.com/d21b8e3392433807b1e2/Something%20just%20like%20this.jpg',
//lrc: 'lrc2.lrc',
theme: '#46718b'
}
]
});
四、部署
aplayer的样式设置好之后就可以把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>
将放置代码放在不同的/themes/next/layout/xxx.swig文件内会有不同的效果。
每个人使用的主题不一样，要根据自己的主题去调试。例如我用的是next-mist主题，且喜欢放置在侧边栏。那么在/themes/next/layout/_marco文件夹下找到sidebar.swig文件。
如果要放置在侧边栏的友链下面,那么在sidebar.swig中找到if theme.links，将放置代码添加到endif之后。如下图：
如要放置到RSS下就在sidebar.swig中搜索if theme.rss，也是添加到endif之后。
我是选择放在了友链下方，如下图：
最终效果如下图：
五、制作音乐/图片外链
正如之前为博客添加评论及统计功能的时候，我们使用了LeanCloud，制作音乐/图片的外链同样也可以使用它。
注册、登陆的步骤在之前的文章里已经描绘过了，这里不再详述，我们直接步入正题。
到你创建的应用里面去，点击存储，如下图。点击_File，点击上传，找到你*载下**好的音乐文件和音乐图片上传上去就行了。
上传之后刷新页面，将列表向后拉，就可以看到对应的音乐和图片的url连接了。
