·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
单独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示例。
三、其他
本插件自动代理视频的播放/暂停控制,视频将随音频的暂停与播放而同步暂停和播放。使用者只需将一个或多个视频代码放在帖子父元素之内,无需设置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 发布: 好详细的说明。。盛赞。。