avatar
文章
63
标签
44
分类
10
首页
时间轴
标签
分类
娱乐
友情链接
留言板
关于
WF's Blog
首页
时间轴
标签
分类
娱乐
友情链接
留言板
关于
Hexo-Aplayer播放器
|Hexo教程
字数总计:2.2k|阅读时长: 9 分钟
|阅读量:|评论数:

创建歌单页面

新建页面，命名为music：

1
hexo new page music

在 /Hexo/source 文件夹下会生成一个music文件夹，打开里面的index.md，修改：

1
2
3
4
5
6
7
---
title: 那些年，听过的音乐
date: 2019-10-06 15:42:18
type: "music"
top_img: https://p.pstatp.com/origin/fe8c0000ded87ed2cd73
comments: false
---

打开主题的 _config.yml文件，在menu下新建一个名为playlist的类（注意这里使用的图标是图标库中的图标。可以选择自己喜欢的图标，我这里选择的是music）。完成后如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  首页: / || fa fa-home
  时间轴: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-folder-open
  清单||fa-fw fa fa-heartbeat:
    - 音乐 || /music/ || fa fa-music
    - 电影 || /movies/ || fa fa-film
    - 书籍 || /books/ || fa fa-book
    - Game || /games/ || fa fa-gamepad
  友链: /link/ || fa fa-link
  留言板: /messageboard/ || fa-fw fa fa-coffee
  关于: /about/ || fa fa-heart

使用 hexo-tag-aplayer 插件

安装

1
npm install --save hexo-tag-aplayer

依赖

  • APlayer.js > 1.8.0
  • Meting.js > 1.1.1

使用

最新版的 hexo-tag-aplayer 已经支持了MetingJS的使用，可以直接解析网络平台的歌曲，首先要在站点配置文件中开启meting模式，添加以下代码在配置文件的最后：

1
2
aplayer:
  meting: true

复制歌单的链接，然后复制歌单的id，例如 http://music.163.com/playlist/967120942/624741809/?userid=624741809这个歌单的id就是967120942，公司名可以是tencent、netease或是其他公司，下面给出一个例子，打开source/music/index.md文件，输入：

1
{% meting "967120942" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

演示

img

扩展

code

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 新功能)

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

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

1
2
aplayer:
  meting: true

接着就可以通过``

在文章中使用 MetingJS 播放器了：

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"%}

有关``

的选项列表如下:

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

关于如何设置自建的 Meting API 服务器地址，以及其他 MetingJS 配置，请参考章节自定义配置

PJAX 兼容

若在 Hexo 中使用了 PJAX，可能需要自己手动清理 APlayer 全局实例：

1
2
3
4
5
6
7
8
$(document).on('pjax:start', function () {
    if (window.aplayers) {
        for (let i = 0; i < window.aplayers.length; i++) {
            window.aplayers[i].destroy();
        }
        window.aplayers = [];
    }
});

自定义配置（3.0 新功能）

现在你可以在 Hexo 配置文件 _config.yml 中配置本插件：

1
2
3
4
5
6
7
8
9
10
aplayer:
  script_dir: some/place                        # Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: some/place                         # Public 目录下样式目录路径，默认: 'assets/css'
  cdn: http://xxx/aplayer.min.js                # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  style_cdn: http://xxx/aplayer.min.css         # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true                                  # MetingJS 支持
  meting_api: http://xxx/api.php                # 自定义 Meting API 地址
  meting_cdn: http://xxx/Meing.min.js           # 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: true                            # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
  externalLink: http://xxx/aplayer.min.js       # 老版本参数，功能与参数 cdn 相同

故障排除

标签参数空格问题

在 Hexo 标签中，用户可能无法直接在标签参数中加入空格

如果遇到这类问题，请直接将参数用双引号括起来使用，如下所示：

1
{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "autoplay" "width:70%" "lrc:caffeine.txt" %}

重复载入 Aplayer.js 资源脚本问题

本插件通过 after_render:html过滤器 , 将 APlayer.js 和 Meting.js 插入到使用了本插件标签 的 HTML 文件中:

1
2
3
4
5
6
7
8
<html>
  <head>
    ...
    <script src="assets/js/aplayer.min.js"></script>
    <script src="assets/js/meting.min.js"></script>
  </head>
  ...
</html>

但是 after_render:html 在一些情形下可能无法被正常触发:

  • Does not work with hexo-renderer-jade
  • after_render:html 似乎在 Hexo 服务器模式默认配置中无法被调用 (hexo server), 遇到这种情况用户可能需要使用 hexo-server 的静态文件解析模式 ( hexo server -s) .

如果在博客生成过程中，插件发现 after_render:html 没有被调用，那么插件将会通过 after_post_render 过滤器来植入脚本。但是使用 after_post_render 会有重复载入 APlayer.js 的情况（例如当一个页面中存在多篇博客时），以及一些非文章页面将无法使用本插件。

如果想完全解决这个问题，用户可能需要自己在主题文件中手动加入 Aplayer.js 与 Meting.js，同时关闭插件的自动脚本插入功能：

1
2
aplayer:
  asset_inject: false

我的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
---
title: 那些年，听过的音乐
date: 2020-04-08 11:05:43
type: "music"
top_img: https://p.pstatp.com/origin/fe8c0000ded87ed2cd73
comments: false
---

# 那些年，听过的音乐

一习清风两行泪，

三线四弦不成诗，

借问江湖泣花调，

为谁飘浪为谁痴？

<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 "405179499" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}
文章作者: Wu Fei
文章链接: http://linuxwf.com/2020/04/09/Hexo-Aplayer%E6%92%AD%E6%94%BE%E5%99%A8/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WF's Blog！
hexo
打赏
  • 微信
    微信
  • 支付宝
    支付宝
相关推荐
2020-04-09
Hexo-Douban 插件
2020-04-09
Hexo博客搭建
2020-04-09
Hexo搜索插件
2020-04-09
Hexo添加Live2d看板动画效果
2020-04-09
Hexo添加RSS订阅
2020-04-09
Valine Admin 留言板
评论
繁