hexo-tag-aplayer音乐插件使用
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_inject
为 false
aplayer:
asset_inject: false
然後在你需要使用 aplayer 的页面 Front-matter 添加
aplayer: true
这样只会在需要 aplayer 的页面插入 js 和 css。
相关文章
- 记一次完整的内网渗透经历
- 太难了!让程序员崩溃的八个瞬间
- 小程序标记点切换闪屏问题的解决方法
- 亿级流量架构实战之秒杀设计
- 全球首个零信任国际标准发布,解决了哪些关键问题?
- 微服务高可用难实现?是时候学学微服务治理了
- 双流行将至,机器学习算法如何助力新冠肺炎病毒的快速检测
- 从公有云到渗透进内网漫游
- 黑客入侵微软邮件服务器部署勒索软件、惠普更新打印机漏洞|12月2日全球网络安全热点
- 互联网公司裁员,中年失业找不到工作,大龄程序员的出路在哪里
- Nature最新封面:两大数学难题被AI突破!DeepMind YYDS
- Google Cloud和高通合作开发Vertex AI NAS 实现AI模型的自动创建
- Android studio SweetAlert for Android
- 李开复张亚勤重磅对谈,顶级AI大咖共话未来,200万网友在线围观
- 广州Robotaxi铁三角又落地,文远知行商业化通行证摊牌
- 腾讯安全月报|数字生态大会举办、多个国际研报认可、首个零信任国际标准发布……
- Linux服务器入门:如何远程登录自己的腾讯云服务器?
- 谷歌时间晶体登上Nature,诺奖得主重大猜想成为现实
- WOT全球技术创新大会2022:十二大热门专题已确认上线,请查收!
- 精度超越Transformer,MIT、港大提出基于物理模型的视觉推理框架