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

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

安装插件

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

npm install --save hexo-tag-aplayer

配置使用

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

<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文档中：

{% 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文件放入资源文件夹中，并且可以通过特定的方式引用它们。例如：

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

使用 aplayerlrc​ 标签来直接插入歌词文本在博客中：

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

播放列表

{% 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​ 中设置：

aplayer:
  meting: true

通过 {% meting ...%}​ 在文章中使用 MetingJS 播放器：

<!-- 简单示例 (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​ 中配置本插件：

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文件中引用：

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

在html页面中引用：

<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文件中引用：

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

在html页面中引用：

<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. MoePlayer/hexo-tag-aplayer: Embed aplayer in Hexo posts/pages

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