Hexo使用 hexo-tag-aplayer 播放音乐

使用效果

使用 hexo-tag-aplayer

歌曲单曲标签使用

标签模版：

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

使用实例：

1. 设置标签：

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

2. 设置居中并适应 pc 和手机端宽度

<style>
    .aplayer {
        margin: 0 auto;
    }
    @media screen and (max-device-width: 400px) {
        .aplayer {
            width: 100%;
        }
    }
</style>

3. 更多标签参数设置:

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

歌曲列表标签使用

标签模版：

{% 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 %}

使用示例：

1. 设置标签：

{% aplayerlist %}
{
    "narrow": false,
    "autoplay": false,
    "mode": "random",
    "showlrc": 3,
    "mutex": true,
    "theme": "#e6d0b2",
    "preload": "metadata",
    "listmaxheight": "513px",
    "width": "50%",
    "music": [
        {
            "title": "认真的雪",
            "author": "薛之谦",
            "url": "/resources/music/你还要我怎样.mp3",
            "pic": "/resources/music/认真的雪.jpg",
            "lrc": "认真的雪.lrc"
        },
        {
            "title": "演员",
            "author": "薛之谦",
            "url": "/resources/music/演员.mp3",
            "pic": "/resources/music//演员.jpg"
        }
    ]
}
{% endaplayerlist %}

2. 设置居中并适应 pc 和手机端宽度

<style>
    .aplayer {
        margin: 0 auto;
    }
    @media screen and (max-device-width: 400px) {
        .aplayer {
            width: 100%;
        }
    }
</style>

高级使用：MetingJS 支持

1. 使用

{%
    meting   "2180172149"    "netease"       "playlist"    "mutex:true"
    "listmaxheight:340px"    "preload:auto"  "theme:#ad7a86
%}

2. 设置

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: netease, tencent, kugou, xiami, baidu
type	必须值	列表播放模式, circulation, random, single, order
autoplay	true	自动播放，移动端浏览器暂时不支持此功能
mutex	true	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	340px	播放列表的最大长度
preload	auto	音乐文件预载入模式，可选项： none, metadata, auto
theme	#ad7a86	播放器风格色彩设置

3. 使用效果

相关链接

官方使用手册：https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md