Hexo博客技巧：为博客插入音乐

前言

想要给博客添加音乐，最简单的方法便是利用第三方音乐平台提供的外链播放器，可是效果并不好，外观丑没歌词且体验极差。

如果使用Hexo-Tag-Aplayer插件的话这个问题就能很好地解决了。

原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。

但是3.0新版本的Aplayer已经支持MeingJS了，MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

具体过程：

使用音乐平台提供插件

这里以网易云为例，找到一首歌曲并生成外链播放器，复制html代码：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=29004400&auto=1&height=66"></iframe>

在合适的地方插入代码即可，效果如下：

其中利用第三方音乐平台生成外链播放器最大的缺点就是有些音乐因为版权保护，无法生成外链：

使用 Hexo-Tag-Aplayer 插件

hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件。

首先执行安装命令：

npm install --save hexo-tag-aplayer

然后如果你想使用上文提到的 MetingJS 功能，请在 Hexo 配置文件 _config.yml 中设置：

aplayer:
  meting: true

接着找到一个歌单、歌曲或专辑的链接，复制这个链接的id，这里以QQ音乐举例： https://y.qq.com/n/yqq/playlist/7868042847.html ，这个歌单的id就是7868042847；

最后将以下示例代码插入到你想要呈现播放器的地方即可：

• 引用Aplayer播放器：

<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css"> 
<scriptsrc="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script> 
<scriptsrc="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script> 

• 插入播放器：

{% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

其中的tencent为公司名，也就是音乐平台，如: netease, tencent, kugou, xiami, baidu；

有关选项列表如下:

选项	默认值	描述
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	播放器风格色彩设置

进阶教程

添加全局吸底Aplayer教程

这里以Butterfly主题为例，参考文章：https://butterfly.js.org/posts/507c070f/

（图源：Butterfly）

关闭 asset_inject

此步骤适用于安装了hexo-tag-aplayer插件的人

由于需要全局都插入aplayer和meting资源，为了防止插入重复的资源，需要把asset_inject设为false

在Hexo的配置文件中：

aplayer:
  meting: true
  asset_inject: false

开启主题的AplayerInject

在主题的配置文件中，enable设为true和per_page设为true：

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

把Aplayer代码插入到主题配置文件

inject:
  head:
  bottom:
    - <div class="aplayer" data-id="7868042847" data-server="tencent" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

运行Hexo就可以看到网页左下角出现了Aplayer

最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的pjax设为true

为博客添加音乐页面

输入命令新建一个名为music的page：

hexo new page music

​

打开博客根目录/source/music/index.md文件，写入以下代码即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css"> 
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script> 
{% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

效果：

我的歌单页面：https://amnesia-f.github.io/music/

---

结语

其他参数

名称	默认值	描述
container	document.querySelector	播放器容器元素
fixed	false	开启吸底模式, 详情
mini	false	开启迷你模式, 详情
autoplay	false	音频自动播放
theme	‘#b7daff’	主题色
loop	‘all’	音频循环播放, 可选值: ‘all’, ‘one’, ‘none’
order	‘list’	音频循环顺序, 可选值: ‘list’, ‘random’
preload	‘auto’	预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	-	音频信息, 应该是一个对象或对象数组
audio.name	-	音频名称
audio.artist	-	音频艺术家
audio.url	-	音频链接
audio.cover	-	音频封面
audio.lrc	-	详情
audio.theme	-	切换到此音频时的主题色，比上面的 theme 优先级高
audio.type	‘auto’	可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情
customAudioType	-	自定义类型，详情
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType	0	详情
listFolded	false	列表默认折叠
listMaxHeight	-	列表最大高度
storageName	‘aplayer-setting’	存储播放器设置的 localStorage key

其他详见：APlayer官方文档