原生lrc歌词同步帖子模板
位置:
首页 >
JS插件[发布: 2024.6.22 作者: 马黑 阅读: 289]
模板代码：
<style>
@import 'https://638183.freep.cn/638183/web/css/yslrc.css';
#tz { --ox: 1px; --lrc-top: 30%; --lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px; --lrc-shadow: #000; height: 567px; background: url('图片地址') no-repeat center/cover; margin: 30px 0; }
#player { --size: 60px; left: 48%; bottom: 20px; }
.vid { height: calc(100% + 60px); mix-blend-mode: overlay; }
</style>
<div id="tz" class="tz" data-lrc="HUACHAO">
<audio id="aud" src="音频地址" autoplay loop></audio>
<video class="vid" src="视频地址" autoplay loop muted></video>
<img id="player" class="player" title="播放/暂停" src="图片地址" alt="" />
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
var lrc = `
[00:00:910]歌词1
[00:02:608]歌词2
[03:45:230]歌词N
`;
</script>
相关说明：
一、约定
帖子 id="tz" class="tz"
播放按钮 id="player" class="player"
视频 class="vid"
音频 id="aud"
CSS关键帧动画开关变量 var(--state)
二、CSS设置
#tz 选择器需要提供几个CSS变量：
① --ox ：帖子水平偏移系数，缺省值 81px（适用于花潮论坛）
② --lrc-top ：歌词纵向方向位置，即伪元素 ::before 的 top 属性值，缺省值 20px
③ --lrc-bg ：歌词颜色，支持渐变背景、图片背景
④ --lrc-shadow ：lrc歌词阴影，缺省值 #333
#tz 选择器还应当做必要的基本设置，如宽高（缺省值1024*640）、margin（外边距）、背景图片等。
#tz选择器设置举例：
#tz {
--ox: 1px;
--lrc-top: 10%;
--lrc-bg ：linear-gradient(to right, pink,tan,pink) center/200px 60px;
--lrc-shadow ：rgba(0, 0, 0, .7);
margin: 30px 0;
width: 1400px;
height: 720px;
background: url('背景图片地址') no-repeat center/cover;
}
#player 选择器可提供 --size 变量，缺省值 80px，另外可通过设置 left 和 top 属性定位元素位置。#player 可以是针对图片，也可以是一个div盒子，若是后者，请通过设置背景图片或动态追加元素使其成为按钮。#player 选择器代码举例：
#player {
--size: 100px;
bottom: 20px;
left: 45%;
/* 如果是div盒子
background: url('背景图片地址') no-repeat center/cover;
*/
}
.vid 选择器
视频的样式默认宽高为100%，拉伸平铺，使用 mix-blend-mode: screen; 融合滤镜。如不满意，可全新定义特定属性值，例如希望高度为100%再加60px并使用叠加滤镜：
.vid {
height: calc(100% + 60px);
mix-blend-mode: overlay;
}
三、HTML代码
详情请查看模板代码的第 9~13 行，注意帖子父元素和播放器都有同值的 id 和 class 属性。
四、JS代码
引用JS资源文档的代码在模板代码的第 16~19 行，后面是歌词变量 lrc 的声明与赋值，歌词一句一行，或连在一起写、各句使用 \n 分隔符隔开。
四、应用实例：迷宫Live版
前一篇: colortext.js文档
下一篇: helight : 身轻如燕的代码展示脚本
发表评论:
评论列表 [5条]
#5 | 知名不具 于 2024-6-25 14:11 发布: 打包的就是好，简洁而高效。这个讲解十分详细。很赞！
#4 | 知名不具 于 2024-6-22 23:10 发布: 非常详尽的讲解，太赞了！
#3 | 悄然 于 2024-6-22 17:03 发布: 模板井tz里添上这句，可以把贴子改为自己想要的大小。。width: 1024px; height: 574px;
#2 | 悄然 于 2024-6-22 16:59 发布: (--state)变量可控，视频动画可控。。。简洁和灵活可以兼得~~
#1 | 飞飞 于 2024-6-22 16:55 发布: CCS和JS都打了包。。。这是那个双封的~~代码简洁又清晰，每一小节配置都给了说明。。。
