文章13
标签13
分类4

使用hexo-tag-aplayer给Hexo博客文章添加音乐

使用 hexo-tag-aplayer 插件
APlayer 播放器的 Hexo 标签插件(现已支持 MetingJS)。

安装

npm install --save hexo-tag-aplayer

依赖

APlayer.js > 1.8.0
Meting.js > 1.1.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 的 文章资源文件夹 功能时,可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中,然后直接引用:

{@% 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 支持 (3.0 新功能)

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

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

aplayer:
meting: true

接着就可以通过 {@% meting …%} 使用时去掉@
在文章中使用 MetingJS 播放器了

单曲

{@% meting "19542337" "netease" "song" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

使用时去掉@

效果:

{% meting "410042507" "netease" "song" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

播放列表

{@% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

使用时去掉@
效果:

更多说明请访问官方文档:
https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md#%E5%AE%89%E8%A3%85

本文作者:Zero
本文链接:https://7vm.cn/archives/31726.html
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可