单独lrc歌词插件使用说明

马黑黑 · 发表于 2023-12-18 08:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-12-18 08:10 编辑

单独lrc歌词插件使用说明

一、地址：

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示例。