马黑PHP整站系统

单独lrc歌词插件使用说明

位置: 首页 > 前端三套件[ 发布时间: 2023.12.18  作者: 马黑  阅读: 435 ]

一、地址 :

https://638183.freep.cn/638183/web/api/lrc.js

二、引用与配置 :

(一)完整JS示例 :


		
<script>

let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
	LRC({
		papa: '#papa',
		lrcAr: geci,
		btn: '.mypic',
		lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
	});
};

let geci = [
	[2,"歌词一",4],
	[7,"歌词二",5],
	[15,"歌词N",4],
];

</script>

(二)配置解释 :

① papa : 父元素的 id class 名称,id 带 # 号、class带 . 号,赋值需要引号,例如, papa: '#papa' ,或, papa: '.papa', ;

② lrcAr : 歌词数组,使用数组变量赋值,例如上面的代码示例中,后面声明了一个 geci 数组变量,就用 geci 赋值给 lrcAr,不要引号。歌词数组规范请查阅论坛里相关的花潮LRC资料或参照其他插件说明。

【提问】lrc歌词可以充当标题使用,这意味着什么?

③ btn : 帖子中用于控制音频的按钮,可以是图片,也可以是其它元素。该按钮请自行设计 @keyframes 动画,并通过CSS给其设置 animation 属性,该属性需要设置一个CSS变量 --state 。举例如下:


		
.mypic {
	/*其它属性代码*/
	animation: rot 6s infinite linear var(--state);
}

@keyframes rot { to { transform: rotate(360deg); } }

图片或其它元素按钮支持单个或多个,如果有多个图片按钮需要插件控制器动画,请给这些元素都加上一个class名称,例如上述示例的 mypic(其他名称也行),然后配置给插件的 btn 参数:btn: '.mypic', 友情提示:btn参数可以缺省,就是说删掉或不提供这个参数,若此,帖子父元素将承担音乐的播放/暂停控制,做大图音展示帖的小盆友可以考虑这个功能。

④ lrc_css : 歌词界面设定,字符变量值,需要引号,使用CSS语法规范表达。例如, lrc_css: 'left: 10px; top: 10px;', 。所设置的内容主要是歌词的位置(left或right 和 top或bottom 两两配对)、颜色(用 color 属性做底色,用 --bg 变量做同步色,同步颜色支持纯颜色、CSS渐变乃至图片)。

特别注意:LRC({}) 配置有语法要求,除了上面提及的要不要引号的问题外,还有,每一个子项(例如,papa子项,btn子项等)写完,都需要添上一个小角逗号,详情请研究上面的完整JS示例。

三、其他

本插件自动代理视频的播放/暂停控制,视频将随音频的暂停与播放而同步暂停和播放。使用者只需将一个或多个视频代码放在帖子父元素之内,无需设置id或class属性,也无需在 LRC({})配置中提供任何参数。

此外,假如需要给帖子添加其他的CSS关键帧动画,只要这个(些)元素的 animation 属性带有 --state 变量且不是单独基于元素的伪元素,它们也将响应音频的播放暂停而运动、暂停。

【附】实例演示:① 轻涟 La vaguelette    ② 马兰花开

前一篇: svg之 animateMotion 路径动画(二)
下一篇: 这个拿来干啥好

发表评论:

       

评论列表 [3条]

#3 | 悄然 于 2024-4-18 12:00 发布: 原来是轻涟和马兰花开的歌词。。知名给翻出来了。。一块复习一下。。

#2 | 知名不具 于 2024-4-18 10:34 发布: 再来学习一下,发现这个真好。

#1 | 了了 于 2023-12-18 19:32 发布: 好详细的说明。。盛赞。。

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com