Hexo博客Next主题加入音乐播放器-Aplayer

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 1.6k 阅读时长 ≈ 6 分钟

APlayer是一个功能丰富、支持多种媒体格式的HTML5音乐播放器，具有播放列表和歌词显示等实用功能。在Hexo中有可以使用的插件hexo-tag-aplayer​

安装插件

插件网址：MoePlayer/hexo-tag-aplayer: Embed aplayer in Hexo posts/pages

1
npm install --save hexo-tag-aplayer

配置使用

加入到侧边栏，在\node_modules\hexo-theme-next\layout_macro\sidebar.njk​文件中添加：

1
<div class="aplayer aplayer-tag-marker meting-tag-marker aplayer-withlrc aplayer-withlist" data-id="1534866348" data-server="tencent" data-type="playlist" data-mutex="true" data-preload="auto" data-theme="#ad7a86"></div>

或者修改主题的config.yml

1
2
3
4
5
6
7
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
# 在网站目录“source/_data”中创建您的自定义文件，并取消下面所需文件的注释。
custom_file_path:
  #head: source/_data/head.njk
  header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk

新建文件source/_data/header.njk，在文件中添加如下内容：

1
<div class="aplayer aplayer-tag-marker meting-tag-marker aplayer-withlrc aplayer-withlist" data-id="1534866348" data-server="tencent" data-type="playlist" data-mutex="true" data-preload="auto" data-theme="#ad7a86"></div>

​​

在Markdown文档中：

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

设置APlayer音乐播放器的选项：

  • ​title​: 音乐的标题。

  • ​author​: 音乐的作者。

  • ​url​: 音乐文件的URL地址。

  • ​picture_url​: 可选参数，音乐封面图片的URL地址。

  • ​narrow​: 可选参数，如果设置，播放器将采用窄样式显示。

  • ​autoplay​: 可选参数，如果设置，音乐将在页面加载时自动播放。但请注意，移动浏览器不支持自动播放音乐。

  • ​width:xxx​: 可选参数，以width:​为前缀，后面跟播放器的宽度值（默认为100%）。

  • ​lrc:xxx​: 可选参数，以lrc:​为前缀，后面跟LRC歌词文件的URL地址。

这些选项允许用户自定义APlayer音乐播放器的外观和行为，例如设置音乐标题、作者、文件链接、封面图片、是否自动播放、播放器宽度以及歌词文件链接等。

当启用了“post asset folders”（后端资源文件夹）功能后，你可以轻松地将你的图片、音乐和LRC文件放入资源文件夹中，并且可以通过特定的方式引用它们。例如：

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

使用 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 %}

开启MetingJS

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

使用 MetingJS，请在 Hexo 配置文件 _config.yml​ 中设置：

1
2
aplayer:
  meting: true

通过 {% meting ...%}​ 在文章中使用 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"%}

有关 {% 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​ 播放器风格色彩设置

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

在 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 相同

  • https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js

  • https://unpkg.com/meting@1.2/dist/Meting.min.js

示例

QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐

创建自己的歌单 (VIP没解析，放到列表里在博客中也播放不了)

以QQ音乐为例，登录QQ音乐创建好歌单后，打开歌单，链接有需要的id

​​

在markdown文件中引用：

1
{% meting "1534866348" "tencent" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

在html页面中引用：

1
<div class="aplayer aplayer-tag-marker meting-tag-marker aplayer-withlrc aplayer-withlist" data-id="1534866348" data-server="tencent" data-type="playlist" data-mutex="true" data-preload="auto" data-theme="#ad7a86"></div>

source文件

将所需文件放到hexo\source\assets​文件夹下，通过下面的方式引用。

在markdown文件中引用：

1
{% aplayer "雾里看花" "AI" "/assets/tgAI.mp3" "/assets/WVWAW5KC.png" autoplay %}

        

        

在html页面中引用：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="aplayer-iDYFLcdV" class="aplayer aplayer-tag-marker" style="margin-bottom: 20px;">
  <pre class="aplayer-lrc-content"></pre>
</div>
<script>
          var ap = new APlayer({
            element: document.getElementById("aplayer-iDYFLcdV"),
            narrow: false,
            autoplay: true,
            showlrc: false,
            music: {
              title: "雾里看花",
              author: "AI",
              url: "/assets/tgAI.mp3",
              pic: "/assets/WVWAW5KC.png",
              lrc: ""
            }
          });
          window.aplayers || (window.aplayers = []);
          window.aplayers.push(ap);
</script>




参考


    

  1. 

    Home - APlayer
    

    2. 

  2. 

    MoePlayer/hexo-tag-aplayer: Embed aplayer in Hexo posts/pages
    

    3. 

  3. 

    DIYgod/APlayer:  Wow, such a beautiful HTML5 music player
    

    4.