menu Hello World
首页  »  学习记录  »  typecho音乐插件 APlayer使用教程
typecho音乐插件 APlayer使用教程
2022-02-01   学习记录   暂无评论   24 次阅读

通过简短的代码在文章或页面中插入漂亮的Html5播放器
自动解析lrc链接,可根据歌曲名和歌手名自动查找封面并生成缓存
支持网易云音乐单曲、歌单、专辑、歌手id的解析
与APlayer保持同步更新

使用方法

在文章或页面中加入下方格式的短代码即可

调用格式

单曲播放:

or

example:

网易云音乐:
多首歌曲:

example:

网易云音乐解析示例:
//一次加入三首歌 //歌单
//艺人热门五十首 //专辑

如果要阻止代码解析成为播放器的话,用[]包裹标签即可

[player id='3084335' type='album'/]

输出:

用到的shortcode标签

 :整个播放器的标签,里面可用下面提到的所有属性
[mp3] :可以用歌曲属性和网易云音乐属性,用于嵌套在标签内部添加音乐
[lrc] :用以添加文本的歌词,可嵌套在[mp3],标签内部;只有当其父标签只定义一首歌的时候才起作用

关于各个标签的属性

播放器配置(只能在标签中使用):

showlrc: 当showlrc的值为 0 或 false 时,不显示歌词,否则将按照歌曲有无歌词来判断是否输出歌词
autoplay: 是否自动播放,默认为 false (注:由于移动端浏览器限制,此功能在移动端浏览器将不起作用)
theme: 设置主题颜色(十六进制),默认为 '#e6d0b2' 

歌曲的属性(可在[mp3]或中使用,不能用于修改整个歌单的属性):

url: mp3文件的链接,必需
lrc: 歌词的lrc链接,非必需
lrcoffset: 歌词整体提前时间(ms)若这个值为负数则为歌词整体延后的时间
title: 歌曲的标题,若值为空则显示 Unknown
artist: 歌曲的艺术家,若值为空则显示 Unknown
cover: 封面图片链接,非必需,若该值为图片链接则按照链接加载封面图,若没有此属性则会按照title和artist自动从豆瓣api中查找封面图,若值为 false 则不自动查找封面,显示默认封面图片

网易云音乐(与歌曲属性用法一样)

id: 歌曲/歌单/专辑/艺人的id ,如果是歌曲的话可用 , 分隔歌曲id一次插入多首歌曲
type: 用以判断id的类型,分为4种:song:歌曲,album:专辑,artist:艺人,collect:歌单

Github

本篇文章采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 许可协议进行许可。

转载或引用本文时请遵守许可协议,注明出处。

发表评论
暂无评论
textsms
account_circle
email
link