黑夜狂奔

马黑黑 发表于 2025-8-12 12:35

马黑黑 发表于 2025-8-12 12:36

<div class="codebox" data-titale="帖子代码">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/night.webp') no-repeat center/cover; --ma-size: 15%; }
#ma { left: 30px; top: 30px; background: url('https://638183.freep.cn/638183/small/2025/f1.webp') no-repeat center/cover; }
#lrc { right: 20px; bottom: 20px; color: gray; }
#lrc::before { background: url('https://638183.freep.cn/638183/small/2025/aa.webp'); background-clip: text; }
#btnFs { right: 30px; top: 30px; color: #fff; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2723322998" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/01/15/25/07/video672482533234e.mp4" autoplay loop muted></video>
<div id="ma" class="grayscale"></div>
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/yslrc-only.js';
var geci = `
告五人 - 黑夜狂奔
很多故事妈妈没有说
以为结局都和童话相同
赤脚在世界给的节奏
才发现自己没有与众不同
我还在思索
我还在捉摸
有人说人是善良的结构
有人说人是邪恶的衣钵
谁让我忘了好奇与探索
谁让你记得生命有枷锁
请让我思索
让我能捉摸
我整夜追逐梦中的银河
害怕自己会忘了爱的模样
长大的样子不应该充满沉默
多希望时间能重头再也没有将就
怕有天欲望战胜需求
让需求转身熄灭了烟火
当拥抱也变得非常奢求
真心变成荆棘刺在心窝
单纯是奢侈的一种
我无法忍受
我整夜追逐梦中的银河
害怕自己会忘了爱的模样
长大的样子不应该充满沉默
多希望时间能重头再也没有将就
我昼夜狂奔在梦的城市
害怕自己会跟丢爱的模样
后悔的棱角不应该划破隽永
多希望时间能重头再也没有将就
music ... ...
我整夜追逐梦中的声音
害怕自己会忘了你的模样
我们的样子是否能永远不变
多希望时间能重头再也没有将就
度过轮回千百遍来到你身边
只为告诉你曾经的爱的模样
请你记得我这辈子和你说过
“你是你自己的礼物你自己的光”
“你是你自己的礼物你自己的光”
-- Thanks --
`;
FS(pa, ma);
lrc(pa, geci, 0.5, 4);
</script>
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-12 12:37

模块说明：

原生LRC歌词之简单同步和亮色同步模块说明 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

马黑黑 发表于 2025-8-12 12:39

第六行代码：

使用图片做歌词同步着色，需要加上 background-clip: text; 属性设置，该属性很早以前就已经得到各主流浏览器的完美支持。

马黑黑 发表于 2025-8-12 12:45

这首歌是经典的需要微调模块所需参数的第四个，处理各歌句演唱用时落差较大的均衡系数。虽然加入了此系数，仍然不能完美解决问题。

第三个参数时处理歌句整体开始演唱时间的偏移量。

第三、四个参数支持正负浮点数，依据歌曲编曲风格以及LRC歌词品质而定。

这两个参数都是可选参数，如非必要，可以不要，或都是 0。

梦江南 发表于 2025-8-12 13:59

黑黑老师辛苦了！{:4_190:}

杨帆发表于 2025-8-12 17:06

漂亮！谢谢马老师经典讲授与精彩示范{:4_191:}

马黑黑 发表于 2025-8-12 18:26

杨帆发表于 2025-8-12 17:06
漂亮！谢谢马老师经典讲授与精彩示范

{:4_190:}

花飞飞 发表于 2025-8-12 20:13

马黑黑发表于 2025-8-12 12:39
第六行代码：

使用图片做歌词同步着色，需要加上 background-clip: text; 属性设置，该属性很早 ...

这个背景被剪成文字的前景色，连续覆盖。。提醒的太及时了{:4_173:}

花飞飞 发表于 2025-8-12 20:15

马黑黑发表于 2025-8-12 12:45
这首歌是经典的需要微调模块所需参数的第四个，处理各歌句演唱用时落差较大的均衡系数。虽然加入了此系数， ...

网上找的的原生歌词微调比较重要。。
根据之前的实践经验，有时候找半天找不着合适现成的，有这时间不如自己做一个更快{:4_173:}
那就相对比较准了

花飞飞 发表于 2025-8-12 20:20

歌名狂野，有意境。。黑夜里狂奔，有点玄幻的感觉
歌曲特别，好听。。。
视频有围合，仿佛有巨大的能量在波动，在银河之下感觉震撼，人物独立于此
整个画面有强烈的视觉冲击感。。音画词视频完美融合

马黑黑 发表于 2025-8-12 20:59

花飞飞发表于 2025-8-12 20:20
歌名狂野，有意境。。黑夜里狂奔，有点玄幻的感觉
歌曲特别，好听。。。
视频有围合，仿佛有巨大的能量 ...

矮油，一点点小心思全部读出来了{:4_170:}

红影发表于 2025-8-12 20:59

又是讲解完就有实例呢，这个好，对理解讲解内容特别好。
这个实例里把四个参数都用上了呢，还使用了图片歌词背景，真好，把该注意的都在实例里演示了{:4_199:}

马黑黑 发表于 2025-8-12 20:59

花飞飞发表于 2025-8-12 20:13
这个背景被剪成文字的前景色，连续覆盖。。提醒的太及时了

谢提

马黑黑 发表于 2025-8-12 21:00

花飞飞发表于 2025-8-12 20:15
网上找的的原生歌词微调比较重要。。
根据之前的实践经验，有时候找半天找不着合适现成的，有这时间不如 ...

是的

红影发表于 2025-8-12 21:05

这歌词还挺有内涵的，帖子的制作也很棒{:4_199:}

马黑黑 发表于 2025-8-12 21:06

红影发表于 2025-8-12 20:59
又是讲解完就有实例呢，这个好，对理解讲解内容特别好。
这个实例里把四个参数都用上了呢，还使用了图片歌 ...

加班弄一下，歌词做得不好

马黑黑 发表于 2025-8-12 21:07

红影发表于 2025-8-12 21:05
这歌词还挺有内涵的，帖子的制作也很棒

帖子的设计是简单的

小辣椒 发表于 2025-8-12 21:57

马黑黑发表于 2025-8-12 12:45
这首歌是经典的需要微调模块所需参数的第四个，处理各歌句演唱用时落差较大的均衡系数。虽然加入了此系数， ...

还有这么多要注意事项

小辣椒 发表于 2025-8-12 21:59

我都没有看懂，歌词上面的图片起什么作用，惨了，啥都不会了

页: [1] 2 3 4 5

花潮论坛's Archiver

黑夜狂奔