前言

hexo-tag-aplayer是将aplay嵌入博客页面的hexo插件
原先 hexo-tag-aplayer 不支持 MetingJS,使得需要图片url,音乐url等等参数,操作起来都很麻烦,需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。but, now…

MeingJS 支持 (3.0 新功能)
MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

安装和配置

在hexo的博客根目录下你只需写入以下代码就可以安装他

1
sudo npm install --save hexo-tag-aplayer

要想使用它你需要在站点配置文件_config.yml中添加如下代码

1
2
aplayer:
meting: true

使用

1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

标签参数

  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: (可选)播放器袖珍风格
  • autoplay: (可选) 自动播放,移动端浏览器暂时不支持此功能
  • width:xxx: (可选) 播放器宽度 (默认: 100%)
  • lrc:xxx: (可选)歌词文件 URL 地址

当开启 Hexo 的 文章资源文件夹 功能时,可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中,然后直接引用:

1
{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

歌词标签

除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中:

1
2
3
{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}

播放列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% aplayerlist %}
{
"narrow": false, // (可选)播放器袖珍风格
"autoplay": true, // (可选) 自动播放,移动端浏览器暂时不支持此功能
"mode": "random", // (可选)曲目循环类型,有 'random'(随机播放), 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放), 默认:'circulation'
"showlrc": 3, // (可选)歌词显示配置项,可选项有:1,2,3
"mutex": true, // (可选)该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
"theme": "#e6d0b2", // (可选)播放器风格色彩设置,默认:#b7daff
"preload": "metadata", // (可选)音乐文件预载入模式,可选项: 'none' 'metadata' 'auto', 默认: 'auto'
"listmaxheight": "513px", // (可选) 该播放列表的最大长度
"music": [
{
"title": "CoCo",
"author": "Jeff Williams",
"url": "caffeine.mp3",
"pic": "caffeine.jpeg",
"lrc": "caffeine.txt"
},
{
"title": "アイロニ",
"author": "鹿乃",
"url": "irony.mp3",
"pic": "irony.jpg"
}
]
}
{% endaplayerlist %}

MeingJS 支持 (3.0 新功能)

例如打开网易云音乐网站找到这首coldplay的《Viva la Vida》,复制他的分享链接,从url中可以得到其id为3986040,按下面格式即可使用

1
{% meting "3986040" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

下面是歌单的写法

1
{% meting "7334369613" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

我们来看看这里面的参数是什么意思

已知问题

  • 有些音乐使用 meting 无法加载出来

  • metingaplayer 不能存在一个页面中,否则会出现 aplayer不会出现的情况

参考资料

1.Hexo主题插入音乐之aplayer音乐播放器
2.hexo-tag-aplayer文档