Hexo主题插入音乐之aplayer音乐播放器
原文首发自：https://wiki.hushhw.cn/posts/a84d1ef1.html
今天折腾的点是给博客中插入音乐，找到的具体可行的方案有：
- 使用音乐平台提供的插件
体验很差 - 使用hexo-tag-aplayer插件
排了坑后体验极佳
使用音乐平台提供插件
以网易云为例，网页端点击生成外链播放器即可生成外链代码，如我的某个歌单生成外链。
可以在自己博客页面中嵌入插件:
<iframe
frameborder="no" border="0"
marginwidth="0" marginheight="0"
width=530 height=310
src="//music.163.com/outchain/player?type=0&id=2205641361&auto=0&height=430">
</iframe>
效果：
缺点非常明显，而最不能忍得是网易音乐有些音乐因为版权保护，没办法生成外链：
[外链图片转存失败(img-nQjLxkao-1567680931243)(https://qn.hushhw.cn/images/Snipaste_2019-01-22_22-55-46.png)]
使用 hexo-tag-aplayer 插件
hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件。
安装执行：
$ npm install --save hexo-tag-aplayer
原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地，要了解具体参数和使用可以查看其中文文档了解。
MeingJS 支持 (3.0 新功能)
MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
如果想在本插件中使用 MetingJS，请在 Hexo 配置文件 _config.yml 中设置：
aplayer:
meting: true
接着就可以 在文章中使用 MetingJS 播放器了，例如打开网易云音乐网站找到这首coldplay的《Viva la Vida》，从url中可以得到其id为3986040，按下面格式即可使用：
{% meting "3986040" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}
再来一个歌单模板：
{% meting "627070825" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}
有关选项列表如下:
| 选项 | 默认值 | 描述 |
|---|---|---|
| id | 必须值 | 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 |
| server | 必须值 | 音乐平台: netease, tencent, kugou, xiami, baidu |
| type | 必须值 | song, playlist, album, search, artist |
| fixed | false |
开启固定模式 |
| mini | false |
开启迷你模式 |
| loop | all |
列表循环模式：all, one,none |
| order | list |
列表播放模式： list, random |
| volume | 0.7 | 播放器音量 |
| lrctype | 0 | 歌词格式类型 |
| listfolded | false |
指定音乐播放列表是否折叠 |
| storagename | metingjs |
LocalStorage 中存储播放器设定的键名 |
| autoplay | true |
自动播放，移动端浏览器暂时不支持此功能 |
| mutex | true |
该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停 |
| listmaxheight | 340px |
播放列表的最大长度 |
| preload | auto |
音乐文件预载入模式，可选项： none, metadata, auto |
| theme | #ad7a86 |
播放器风格色彩设置 |
遇到的坑
我原先是用的主题是yilia，非常喜欢它的相册功能，于是换到现在的主题后把该功能移植了过来，如果有小伙伴也想要实现可以参看我的这篇文章：『Hexo主题maupassant博客搭建相册』。
当把hexo-tag-aplayer 配置好并且用几个页面测试后，发现相册功能失效了，查找问题后发现在ins.js中自动加了下面这些代码导致的失效。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
经过一番在网上寻找后无果后，于是决定仔细研读官方文档，查看官方的中文文档后发现，可能是插件的自动脚本插入功能导致的，使得ins.js中自动插入了代码，于是关闭该功能试试：
aplayer:
asset_inject: false
关闭后确实解决了问题，相册功能恢复，下面的问题就是自己配置插件，在需要的地方引用代码了。
####1. 恢复post页面插件功能
我是使用的主题maupassant-hexo都是用的是.pug格式，其他小伙伴根据自己的渲染文件进行修改。
主题配置页面写入：
# 播放器
aplayer:
enable: true
新建文件aplayer.pug放在/layout/_partial文件夹下，写入：
link(rel="stylesheet" type='text/css', href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css")
script(type='text/javascript', src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js")
script(type='text/javascript', src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js")
最后在post.pug中引用即可：
if theme.aplayer.enable
include _partial/aplayer.pug
这样在文章页面可以使用该插件了。
可以通过本地hexo server来检查一下文章页面head中有没有成功引入。
2. 在非post页面使用插件功能
我在/source/文件夹下自定义的页面life，我需要该页面使用插件，最简单的方式就是直接在index.md中引用：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
]
最终效果：
]
本文参考自：
https://github.com/MoePlayer/hexo-tag-aplayer
https://tianma.space/post/3998746934/index.html