按钮+LRC极简模块简单说明

马黑黑 · 发表于 2024-2-17 09:56

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

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

x

本帖最后由马黑黑于 2024-2-17 12:18 编辑

【JS资源】

https://638183.freep.cn/638183/web/js/btnlrc.js

【示例】
庆庆：空心 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

【说明】

（一）资源引用

方法一：适用于自由环境

<script charset="utf-8" src="https://638183.freep.cn/638183/web/js/btnlrc.js"></script>

方法二：适用于自由环境与DZ论坛

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);

//这里用 var 声明歌词
//var geci = [ [2,"歌句一",5], [8,"……",4], [126,"歌句N",5.6]];
</script>

（二）配置需求：JS资源加载后，除歌词声明，其他仅通过帖子CSS+HTML实现——

其一：声明歌词，变量固定为 geci ；
其二：歌词容器元素 id="lrc"，它通过伪元素模拟同步；
其三：播放控制器元素 id="btnplay"，它可以是一张图片、一个有背景图的div等等，甚至使用JS等机制为其制作复杂的图片（如《空心》）；

其四：歌词使用的关键帧动画和按钮所使用的关键帧动画共三个：

@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }

它们以及对它们的调用，都在帖子前端代码中实现，要求上述三个语句保留关键帧动画的原始名称，并，确保调用关键帧动画的 animation 属性中有 CSS变量 --state。

进一步了解 btnlrc 模块的使用，请参阅《空心》一帖的二楼代码。

【其他】

模块托管了页面中所有视频，若有视频，不论多少，视频将会与音频同步播放、暂停。同时，帖子中，animation属性调用的关键帧动画，只要加入了 var(--state) 参数，也将于按钮同步运行与暂停。