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

music

依赖：

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

hexo-tag-aplayer和MeingJS使用方法摘抄自官网：中文文档

首发自我的个人博客 ——> https://kartjim.top/2021/10/16/music

hexo-tag-aplayer

基于JavaScript的播放器插件

github —— DIYgod/APlayer

在hexo中使用aplayer插件：

下载

npm install --save hexo-tag-aplayer

基本使用

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

标签参数

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

歌词标签

除了使用标签 lrc 选项来设定歌词，你也可以直接使用 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 %}

MeingJS

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	播放器风格色彩设置

另，还可以自定义配置；
more: DIYgod/APlayer

使用

只使用aplayer，需要自己配置歌曲url以及歌词url等，比较麻烦，建议直接使用aplayer+MeingJS。

使用aplayer+MeingJS过程中最主要的也是最难的步骤就是找到对应音乐平台的歌曲或歌单的 id 号 。

网易云音乐的id比较好找，其它音乐平台几经加密，很难找到他们的音乐id号。

下面是我整理的方法：

网易云音乐（netease）

去网易云音乐客户端或网页端等选择喜欢的歌曲或者歌单，然后点击分享可获得分享链接；
在分享链接里会有歌曲或者歌单的id号。

例如： 我选择电音榜这个歌单，获取分享链接：

分享网易云音乐创建的歌单「云音乐电音榜」: https://y.music.163.com/m/playlist?id=1978921795&userid=1591897049&creatorId=1 (来自@网易云音乐)

其中playlist?id=1978921795即为歌单的id号；
{% endnote %}
使用例子：
记得更换server和type哦

电音榜

{% meting "1978921795" "netease" "playlist" "mutex:true" "theme:#777777" %}

秋名山

{% meting "1359121313" "netease" "song" "mutex:true" "theme:#6F42C1" %}

林俊杰 – 小酒窝

{% meting "108468" "netease" "song" "mutex:true" "theme:#5CB85C" %}

---

QQ音乐（tencent）

去QQ音乐客户端或网页端等选择喜欢的歌曲或者歌单，然后点击 分享->复制链接，获得分享链接；
得到：「胡歌《六月的雨》https://c.y.qq.com/base/fcgi-bin/u?__=M2H4qb43 @QQ音乐」

在浏览器中打开链接，之后在搜索框内链接会变化，复制变化后的链接。
例如上面的链接会变成： 「https://i.y.qq.com/n2/m/playsong/index.html?ADTAG=cbshare&_wv=1&appshare=android_qq&appsongtype=1&appversion=10180010&channelId=10036163&hosteuin=owCq7wosNKE57v%2A%2A&openinqqmusic=1&platform=11&songmid=004ND60i0f49Tf&type=0」

注意到在连接中会有类似于songmid=004ND60i0f49Tf的id号即为歌曲或歌单id。

只有免费的歌才能听哦！

使用例子：
记得更换server和type哦
胡歌 – 六月的雨

{% meting "004ND60i0f49Tf" "tencent" "song" "mutex:true" "theme:#D9534F" %}

麦振鸿 —— 《雪见·落入凡尘》

{% meting "003IgzYb2zRkt1" "tencent" "song" "mutex:true" "theme:#F0AD4E" %}

自建歌单 —— 那些年唱进心里的歌

{% meting "4263757413" "tencent" "playlist" "mutex:true" "theme:#428BCA" %}

轻音乐 – 夏野与暗恋

{% meting "002ocsmn2l3ukH" "tencent" "song" "mutex:true" "theme:#0F0F0F" %}

---

酷狗音乐（kugou）

实在太难了啊啊啊！

和qq音乐获取链接的方式一样;
但是：

• 获取到的链接并不好找到id号。一般可以找到album号;
• 有的时候就算找到album号，改type为album，也不一定可以>成功，要么是出错播放不了 Not available，要么就是出现一个未>知的播放列表；
• 酷狗音乐基本都是付费才能听的音乐，就算成功找到id号，也>不能播放（本人并不会破解会员音乐）；

勉强找到一个可以放的歌：

{% meting "9176014" "kugou" "album" "mutex:true" "theme:#5CB85C" %}

---

千千音乐（baidu）

！！未解决
这加密，我实在佩服！！！

---

虾米音乐（xiami)

! 虾米音乐已挂 !