Hexo——APlayer插件

介绍

Aplayer

APlayer是目前广泛使用的HTML5音乐播放器。具体资料可以参见官方的白皮书。准确的说,我在Hexo中使用的并不是APlayer播放器,而是基于APlayer的Hexo标签插件——hexo-tag-aplayer

MetingJS

MetingJS是基于Meting API的一款APlayer衍生播放器,具有播放外链的功能。能够播放QQ音乐,酷狗音乐,网易云音乐等等平台。新版的hexo-tag-aplayer增加了MetingJS的支持。

安装与使用

1.安装hexo-tag-player

使用npm安装:

1
npm install --save hexo-tag-aplayer

或者使用Yarn安装:

1
yarn add aplayer

2.启用MetingJS

打开你的博客配置文件_config.yml(注意这里指的是博客项目根目录下的__config.yml文件,而不是Your_Blog/theme/_config.yml文件),增加以下设置:

1
2
aplayer:
meting: true

增加之后保存退出。

3.引入播放器

在这里建议大家可以参照hexo-tag-aplayer的github page

以下代码举例:

1
{% meting "2839900843" "netease" "playlist" %}

效果如下:

这里的数字”2839900843”指的是你的歌单id号,可以通过在web端打开你的以后的音乐平台查看到:

4.个性化配置

播放器的样式并非一成不变。我们可以通过修改上述的引入语句来进行个性化配置。举例:

1
2
3
4
5
<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

meting选项列表如下:

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

一些问题

1.歌单无法更新

描述

在第一次引用歌单id的时候,可以加载歌单的信息。但是继续向歌单中添加歌曲后,被引用的歌单并不会有对应的更新。

该问题在Issues #55中已被热心观众提到,不过至今仍旧没有解决。。。。

解决方法

重新建立歌单,添加完需要添加的语句之后,再进行引用。重新deploy之后,修改的歌单就会生效。