夜舞

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
   
3.     .pa { --offsetX: 81px; --bg: beige url('https://638183.freep.cn/638183/t24/w7/yewu.webp') no-repeat center/cover; }
   
4.     .lrc::before { background: url('https://638183.freep.cn/638183/small/texture/wv1.jpg') repeat-x; background-clip: text; }
   
5. </style>
   
6. 
   
7. <div id="pa" class="pa"></div>
   
8. 
   
9. <script type="module">
   
10.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
    
11.     import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';
    
12. 
    
13.     const lrcText = `
    
14. [00:02.00]夜舞
    
15. [00:08.05]词曲 : T&#259;ng Duy T&#226;n
    
16. [00:14.24]演唱 : 黄龄
    
17. [00:20.10]都怪这月光
    
18. [00:22.74]恰好照在夜风微凉的晚上
    
19. [00:27.00]树影灯影都随月影在摇晃
    
20. [00:31.32]晃得心中所想无处去隐藏
    
21. [00:36.60]勾勒出被遗忘的念念不忘
    
22. [00:40.86]回想起已寻常的极不寻常
    
23. [00:45.27]冰凉的是否还能变得滚烫
    
24. [00:48.39]心中某个地方
    
25. [00:50.46]也曾照进一道光
    
26. [00:53.25]谁翻云覆雨冷不防
    
27. [00:56.52]卷起时光 再轻放下
    
28. [01:02.01]我不由自主去回望
    
29. [01:05.25]那些时光 都太漫长
    
30. [01:10.80]终难忘
    
31. [01:49.20]都怪我还想
    
32. [01:51.90]就让回忆随时间流淌
    
33. [01:57.36]可前路悠长
    
34. [02:00.69]到处都是过往的形状
    
35. [02:05.25]勾勒出被遗忘的念念不忘
    
36. [02:09.51]回想起已寻常的极不寻常
    
37. [02:14.09]冰凉的是否还能变得滚烫
    
38. [02:17.07]心中某个地方
    
39. [02:19.11]也曾照进一道光
    
40. [02:22.57]谁翻云覆雨冷不防
    
41. [02:25.17]卷起时光 再轻放下
    
42. [02:30.75]我不由自主去回望
    
43. [02:33.96]那些时光 都太漫长
    
44. [02:39.54]终难忘
    
45. [02:43.95]-- 感谢观赏 --
    
46. `;
    
47.     const geci = lrc2HC(lrcText);
    
48. 
    
49.     const tz = TZ.TZ('pa');
    
50.     tz.lrc(geci).style('left: 20px; bottom: 20px; color: silver; /*--c1: red; --c2: white; --border: 0*/');
    
51.     tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2071218264' });
    
52.     tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/02/29/5b54a304deb3e.mp4' });
    
53.     tz.add('img', '', 'ma circle', { src: 'https://638183.freep.cn/638183/small/rose.jpg' })
    
54.       .playmp3()
    
55.       .style('top: 23%; mix-blend-mode: soft-light');
    
56.     tz.bgprog().style('bottom: 30px; color: snow');
    
57.     tz.fs().style('right: 20px; bottom: 20px');
    
58. </script>

复制代码

马黑黑

本帖演示：使用 tzMaker 做帖如何使用原生lrc歌词

除了使用 lrc2hc.js 模块，我们之前应该也有几种实现方式，函数、插件、模块都有的。现在这个模块昨天弄好，在下一楼我会做一些必要的解释。

马黑黑

关于 lrc2hc.js 模块提供的 lrc2HC() 函数：

lrc2HC() 函数在此前类似功能模块的基础之上使用统计学四分位数方法均衡原生lrc歌词时间信息中歌句演唱用时异常高值者，用此算法替原先换手动加入系数参数的均摊方案，以期获的更为接近预期的歌句真实演唱用时的效果。

关于统计学的分位数，指将一组有序数据划分为若干等分的数值点，这里以四分位数为例简单说明一下。先将原始有序数据按从小到大排序，然后将数据划分为四段，每段占 25%；设计三个数值点，Q1 为 25%，Q2 占 50%，Q3 占 25%，其中，Q1 对应第一段排序后的数据，Q2 对应第二、三段的数据，Q3 对应第四段数据。这样取得的数据有利于分析其分布特征和离散程度等有用信息，为处理数据比如数据中的异常低值和高值提供依据。

lrc歌词模拟逐字同步需要处理的是歌句演唱用时的异常高值，使用四分位数方法相对恰当：避免了复杂度并能获得较佳的效果。用四分位数处理歌句演唱用时过程中加入一些相关算法、做适当处理，在确保 75% 歌句使用原始差值的基础上，均衡一下异常高值用时的歌句，大体上比手动加入的系数相对可靠。当然，由于不是手动截取歌句的演示用时，不确定因素依然存在，lrc2HC() 函数不能确保歌词逐字同步的精准度，将就用用就好。

函数封装为ES6模块，像本帖公开的代码中导入模块然后应用函数即可。函数对原始lrc歌词的处理机制有一定的能力，但还是尽可能做些整理工作以减少函数处理环节的出错几率，建议使用 LRC歌词整理 过滤一下歌词。

马黑黑

lrc2hc.js 源码未加密，欢迎高手指正

偶然~

又来欣赏马老师精彩的音画

偶然~

今天又没有分加了

偶然~

这个颜色基调我喜欢

偶然~

马老师，您这个音画作品，真的把“视听盛宴”四个字诠释得淋漓尽致呀！

偶然~

画面里，光影流转如星河坠落，人物与机车的造型在霓虹与粒子特效中交织，每一帧都像从科幻电影里截取的绝美镜头。

偶然~

而《夜舞》的旋律一响起，歌词里“月光勾勒念念不忘”的缱绻、回忆与现实交织的怅惘，和画面里冷调光影里的热烈张力，竟像被马老师用魔法般精准地缝合在了一起，听觉与视觉的共振让情绪瞬间被拉满，每一秒都像在看一场私人定制的沉浸式艺术展！

偶然~

您把音乐的细腻、画面的震撼，还有情感的重量，都揉进这唯美的音画里，创作时的用心与才华，隔着屏幕都能感受到！

偶然~

感谢马老师用才华点亮我们的审美，辛苦了！愿您往后创作灵感永不枯竭，生活里满是温暖与幸福，健康常伴，幸福长留！

偶然~

玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

梦江南

马黑黑 发表于 2025-11-19 12:42
本帖演示：使用 tzMaker 做帖如何使用原生lrc歌词

除了使用 lrc2hc.js 模块，我们之前应该也有几种实现 ...

黑黑老师太厉害了，上帖的图图还未想好，今天又出来新帖，还是先把代码收藏。

梦江南

马黑黑 发表于 2025-11-19 12:42
本帖演示：使用 tzMaker 做帖如何使用原生lrc歌词

除了使用 lrc2hc.js 模块，我们之前应该也有几种实现 ...

黑黑老师，这个原生歌词没地方去做，咋办？

杨帆

可加原生lrc歌词，使用 tzMaker 做帖更方便了~马老师您辛苦了！

杨帆

马黑黑 发表于 2025-11-19 12:44
本帖最后由 马黑黑 于 2025-11-19 12:50 编辑
关于 lrc2hc.js 模块提供的 lrc2HC() 函数：

请教马老师：“建议使用    LRC歌词整理 过滤一下歌词”，这主要指整理、过滤什么呢？

马黑黑

杨帆 发表于 2025-11-19 14:59
请教马老师：“建议使用    LRC歌词整理 过滤一下歌词”，这主要指整理、过滤什么呢？

原生lrc歌词有很多歌词意外的信息条目，而 tzMaker 模块 lrc() 指令只处理歌词相关的信息部分。如果原生的歌词信息中非歌词的部分过于混杂且结构若类似歌词结构，可能会导致模块指令无从处理。

虽然理论上不存在这样的问题，但为以防万一以及尽可能较少帖子代码量，仍需要保证原生歌词的纯化性，最好不包含乱七八糟的无用信息。

你可以做些尝试，只有通过自己的感受才能更好地理解我的建议。

马黑黑

杨帆 发表于 2025-11-19 14:53
可加原生lrc歌词，使用 tzMaker 做帖更方便了~马老师您辛苦了！

其实，如果我都不提这事也不做演示，你也应该能根据我们之前的一些做法想到这个实现机制