叹
<style>@import 'https://638183.freep.cn/638183/web/ku/yslrc_player_02.css';
#papa { margin: 30px 0 30px calc(50% - 593px); background: #000 url('https://638183.freep.cn/638183/t24/webp3/tan.webp') no-repeat center/cover; }
#mplayer { --prog: gold; bottom: 10px; width: 40%; }
#lrcDiv { --hlcolor:orange; color: wheat; text-shadow: 1px 1px 1px black; top: 20%; width: 50%; }
#fsbtn { top: 20px; }
</style>
<div id="papa" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1921641347" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/45/45/video651172e941c2d.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_player_02.js';
var lrc = `叹 - 电视剧《锦衣之下》插曲\n演唱 ：叶青、赵天宇\n梦萦中心若浮萍的漂泊\n恍若乎孑然中凋落\n可偏偏你像一席的烟波\n划出了涟漪的花朵\n量渊：\n倘若爱燃尽了寂寞\n我宁愿做焚世的火\n此生眼眸全都为你镌刻\n哪怕最后你眸中消散我\n合：\n叹命途要辗转多少次蹉跎\n余生才修来岁月的正果\n懒蘫：\n再孤独单飞的鸟\n终归要降落\n合：\n告诉我两颗心\n交汇错落是什么结果\n人总要历尽碎落\n失去后才懂\n情又是为何\n懒蘫：\n恪守到几何\n相伴才最不负你我\n量渊：\n该如何能替你苦痛\n我愿意承受到湮没\n红尘茫茫世间太多离愁\n韶华倾尽只求情深不朽\n合：\n叹命途要辗转多少次蹉跎\n余生才修来岁月的\n懒蘫：\n正果\n再孤独单飞的鸟\n终归要降落\n量渊：\n最远的是守候\n懒蘫：\n告诉我\n合：\n两颗心\n交汇错落是什么结果\n人总要历尽碎落\n失去后才懂\n情又是为何\n懒蘫：\n恪守到几何\n相伴才最不负你我`;
hcplay(papa, lrc, 5);
</script>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/ku/yslrc_player_02.css';
#papa { margin: 30px 0 30px calc(50% - 593px); background: #000 url('https://638183.freep.cn/638183/t24/webp3/tan.webp') no-repeat center/cover; }
#mplayer { --prog: gold; bottom: 10px; width: 40%; }
#lrcDiv { --hlcolor:orange; color: wheat; text-shadow: 1px 1px 1px black; top: 20%; width: 50%; }
#fsbtn { top: 20px; }
</style>
<div id="papa" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1921641347" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/45/45/video651172e941c2d.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_player_02.js';
var lrc = `叹 - 电视剧《锦衣之下》插曲\n演唱 ：叶青、赵天宇\n梦萦中心若浮萍的漂泊\n恍若乎孑然中凋落\n可偏偏你像一席的烟波\n划出了涟漪的花朵\n量渊：\n倘若爱燃尽了寂寞\n我宁愿做焚世的火\n此生眼眸全都为你镌刻\n哪怕最后你眸中消散我\n合：\n叹命途要辗转多少次蹉跎\n余生才修来岁月的正果\n懒蘫：\n再孤独单飞的鸟\n终归要降落\n合：\n告诉我两颗心\n交汇错落是什么结果\n人总要历尽碎落\n失去后才懂\n情又是为何\n懒蘫：\n恪守到几何\n相伴才最不负你我\n量渊：\n该如何能替你苦痛\n我愿意承受到湮没\n红尘茫茫世间太多离愁\n韶华倾尽只求情深不朽\n合：\n叹命途要辗转多少次蹉跎\n余生才修来岁月的\n懒蘫：\n正果\n再孤独单飞的鸟\n终归要降落\n量渊：\n最远的是守候\n懒蘫：\n告诉我\n合：\n两颗心\n交汇错落是什么结果\n人总要历尽碎落\n失去后才懂\n情又是为何\n懒蘫：\n恪守到几何\n相伴才最不负你我`;
hcplay(papa, lrc, 5);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖最后由 马黑黑 于 2025-3-21 21:20 编辑
一、播放器和歌词UI设置：
（一）播放器
CSS选择器 #mplayer { ... } 可以通过CSS变量或属性设定：
--track: gray;
--prog: red;
color: silver;
width: 50%;
（二）LRC歌词
--hlcolor: yellow;
color: lightgreen;
二、模块的引用
（一）CSS ：参考帖子代码第 2 行；
（二）HTML：
帖子容器需要 class="pa" 属性（参考帖子代码第 9 行）；
视频如果需要模块的联动控制，需要将其置于帖子容器之内，同时，如果需要挖空中心，请在视频标签 video 加入 class="vid" 属性，若自行设置视频相关CSS或HTML属性，不要使用 class="vid" 属性。
音频标签 audio 请自设 autoplay、loop 属性，模块为对之进行设置。
（三）JS：
需要 script 标签指定模块类型 type="module"（参阅帖子代码第 14 行）,script 标签内的所有变量需要声明再使用（var、let或const）；
引入 JS 模块：参阅帖子代码第 15 行；
配置模块参数：hcplay(帖子父容器变量, LRC歌词变量, 歌词显示行数)，参阅帖子代码第 17 行。
形参中，歌词显示行数可以省略，若省略，则默认显示 3 行。
【提示】本模块支持 ALT+X 暂停/播放音乐，F11 切换全屏/常规模式
再占一位{:4_170:}转身就发现又出了个新贴，这速度堪比神九九九 看画面，我才想叹呢，怎么让你找到这样的背景和这样的视频动态~~
双人双骑闯荡江湖，从此途中不寂寞。。
这视频如满天的孔明灯，放满天空的祝福。。
关键是它有点径向辐射的效果，聚焦于人物~~
感觉好东西都让你给找到了{:4_170:} 这么大胆的跳脱搭法，居然效果这么美。。{:4_173:}
歌词颜色是与视频搭得相当协调，高亮部分的颜色看着非常舒适~~
五行共显，字体大小也设计过的吧。。
听完了，看到唱完之后，会整页下翻回第一句。。。 叹一个，歌很好听，惊艳到了。。看到留了楼，等说明书。。{:4_173:} 花飞飞 发表于 2025-3-21 19:45
叹一个，歌很好听，惊艳到了。。看到留了楼，等说明书。。
这个也没啥说明的，等下再说 花飞飞 发表于 2025-3-21 19:44
这么大胆的跳脱搭法，居然效果这么美。。
歌词颜色是与视频搭得相当协调，高亮部分的颜色看着非 ...
都会找对应歌词的位置 花飞飞 发表于 2025-3-21 19:38
看画面，我才想叹呢，怎么让你找到这样的背景和这样的视频动态~~
双人双骑闯荡江湖，从此途中不寂寞。。
...
我有木柄的放大镜 花飞飞 发表于 2025-3-21 19:35
再占一位转身就发现又出了个新贴，这速度堪比神九九九
{:4_203:} 歌曲很好听，这个视频也很惊艳，好美的帖子{:4_199:} 这是五行的歌词了，高亮色除了首尾都是显示在当中一行，很完美的设计{:4_187:} 一打开帖子就被画面吸引，宿命纠缠的两颗心。这纷扰的尘世如飘飞的孔明灯，随时湮灭。
非常漂亮的制作{:4_199:} 精准配置的数据匹配了精准的歌词高亮匹配{:4_199:} 漂亮，我要学习一下{:4_178:} 朵拉 发表于 2025-3-21 20:37
漂亮，我要学习一下
{:4_190:} 红影 发表于 2025-3-21 20:27
精准配置的数据匹配了精准的歌词高亮匹配
{:4_191:} 红影 发表于 2025-3-21 20:26
一打开帖子就被画面吸引，宿命纠缠的两颗心。这纷扰的尘世如飘飞的孔明灯，随时湮灭。
非常漂亮的制作{:4_ ...
歌词挺不错的吧 红影 发表于 2025-3-21 20:20
这是五行的歌词了，高亮色除了首尾都是显示在当中一行，很完美的设计
而已自定义，单双数不论，一行也成