Hexo主题插入音乐

平台外链音乐

可以采用网易云音乐生成的外链播放器，将其放入博客中指定位置，即可在其渲染出播放器列表，可有一个弊端就是此处的受到许多网易云的限制，有许多歌都是能听，可就是不能外链。

此处以网易云为例，在网页端点击生成外链播放器即可生成外链代码，可就是有些音乐因为版权保护，没办法生成外链。蓝瘦…

Aplayer

那么网易云不给搞，那就用插件搞一搞。APlayer是一个可爱的HTML5音乐播放器。一些知名的网站都使用它。

安装

首先安装插件hexo-tag-aplayer，原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地，要了解具体参数和使用可以查看其中文文档了解。
$ npm install --save hexo-tag-aplayer

MeingJS 支持 (3.0 新功能)

MetingJS 是基于Meting API 的 APlayer 衍生播放器，使用MetingJS时，您的博客可以播放腾讯，网易，夏米，酷狗，百度等音乐。

如果想在本插件中使用 MetingJS，请在 Hexo 配置文件 _config.yml 中设置：
aplayer:
  meting: true

用法示例

文章中

随后便可以在文章中使用 MetingJS播放器了

简单的例子：
{% meting "60198" "netease" "playlist" %}
稍稍复杂的：
{% meting "4861614906" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86" %}

配置

选项显示如下：

选项	默认	描述
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`	指示列表是否应首先折叠
autoplay	`false`	自动播放的歌曲，移动浏览器不支持
mutex	`true`	播放其他音频时暂停
listmaxheight	`340px`	播放清单的最大高度
preload	`auto`	加载音乐的方式，可以`none`，`metadata`，`auto`
storagename	`metingjs`	存储播放器设置的LocalStorage密钥
theme	`#ad7a86`	主题色

博客里

在header上添加

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>

在footer上添加

<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

在布局位置添加

<div class="aplayer" data-id="4861614906" data-server="netease" data-type="playlist"></div>
 
<div class="aplayer" data-id="4861614906" data-server="netease" data-type="album" data-fixed="true" data-autoplay="true" data-volume="1.0" data-list-max-height="200px" data-list-folded="true"></div>

Option

选项	默认	描述
id	要求	歌曲ID /播放列表ID /专辑ID /搜索关键字
server	要求	音乐平台：`netease`，`tencent`，`kugou`，`xiami`，`baidu`
type	要求	`song`，`playlist`，`album`，`search`，`artist`
auto	选项	音乐链接，支持：`netease`，`tencent`，`xiami`
fixed	`false`	启用固定模式
mini	`false`	启用迷你模式
autoplay	`false`	音频自动播放
theme	`#2980b9`	主色
loop	`all`	播放器循环播放，值：’all’, ‘one’, ‘none’
order	`list`	播放器播放顺序，值：’list’, ‘random’
preload	`auto`	值：’none’, ‘metadata’, ‘auto’
volume	`0.7`	默认音量，请注意播放器会记住用户设置，用户自己设置音量后默认音量将不起作用
mutex	`true`	防止同时播放多个音频，在该音频开始播放时暂停其他音频
lrc-type	`0`	歌词类型
list-folded	`false`	指示列表是否应该首先折叠
list-max-height	`340px`	列出最大高度
storage-name	`metingjs`	存储播放器设置的localStorage键

支持

该插件得力于hexo-tag-aplayer与MetingJS 的支持。