使用插件aplayer和MeingJS在hexo文章内添加音乐

title: “在Hexo博客中使用APlayer和Meting音乐播放器”
date: “2021-10-16”
categories:

“技术文档”

tags:

“Hexo”
“APlayer”
“Meting”
“音乐播放器”

APlayerJS

依赖：

APlayer.js > 1.8.0
Meting.js > 1.1.1
官方文档GitHub - MoePlayer/hexo-tag-aplayer: Embed aplayer in Hexo posts/pages

在hexo中使用aplayer插件：

下载

npm install --save hexo-tag-aplayer

基本使用

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

示例我写的：

{% aplayer "Shape of You" "Ed Sheeran""http://music.163.com/song/media/outer/url?id=447925558.mp3" %}

标签参数

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

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

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

资源文件引用hexo教程资源文件夹

歌词显示：

除了通过lrc参数指定外，可以直接在博客中使用aplayerlrc标签插入歌词：

{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00] 歌词内容
...
{% 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是APlayer衍生播放器，支持多个音乐平台的播放。

配置

在Hexo配置文件_config.yml中设置：

aplayer:
  script: https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js
  style: https