hexo-tag-aplayer音乐插件使用
hexo-tag-aplayer
安装
1 | npm install --save hexo-tag-aplayer |
依赖
- APlayer.js > 1.8.0
- Meting.js > 1.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 地址1
{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}
歌词标签
除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中:
1 | {% aplayerlrc "title" "author" "url" "autoplay" %} |
播放列表
1 | {% aplayerlist %} |
MeingJS 支持 (3.0 新功能) 最主要最简单的使用 推荐使用
MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
如果想在本插件中使用 MetingJS,请在 Hexo 配置文件 _config.yml 中设置:
1 | aplayer: |
接着就可以通过 {% meting ...%} 在文章中使用 MetingJS 播放器了:
1 | vim source/music/index.md #添加以下代码 |
有关 {% 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_inject 为 false
1 | aplayer: |
然後在你需要使用 aplayer 的页面 Front-matter 添加
1 | aplayer: true |
这样只会在需要 aplayer 的页面插入 js 和 css。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Navi!
评论









