zl程序教程

您现在的位置是:首页 >  其他

当前栏目

hexo-tag-aplayer音乐插件使用

2023-04-18 14:56:13 时间

hexo-tag-aplayer

安装

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

picture_url

narrow

autoplay

width:xxx

lrc:xxx

{% 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 播放器了:

vim source/music/index.md  #添加以下代码
{% meting "1983872197" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:700px" "preload:none" "theme:#ad7a86"%}
注 meting "1983872197" 可以为歌单ID或者单曲ID

有关 {% 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

播放器风格色彩设置

插件会在每一個文件都插入 js 和 css,为了避免这一情況,butterfiy 3.0 版本內置了 aplayer 需要的 css 和 js。 如果需要在指定的文章上播放 首先在 Hexo 根目錄_config 里配置 asset_injectfalse

aplayer:
  asset_inject: false

然後在你需要使用 aplayer 的页面 Front-matter 添加

aplayer: true

这样只会在需要 aplayer 的页面插入 js 和 css。