分裂人格

凡哥

LRC

凡哥

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz2026.css?v1';
   
3.   .pa { --bg: url('https://638183.freep.cn/638183/t24/6/stage.jpg') no-repeat center/cover; }
   
4.   .player { bottom: 50px; width: 120px; height: 120px; background: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; }
   
5.   .svgprog { bottom: 20px; }
   
6.   .lrc { right: 50px; top: 30px; writing-mode: vertical-rl; letter-spacing: 4px; text-orientation: upright; }
   
7.   .btnFs { left: 30px; top: 30px; color: lightblue; }
   
8. </style>
   
9. 
   
10. <div class="pa">
    
11.   <audio src="https://music.163.com/song/media/outer/url?id=1983337895" autoplay loop></audio>
    
12.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/2475824/00/08/27/5d1c226cd2de7.mp4" autoplay loop muted></video>
    
13.   <div class="lrc">LRC</div>
    
14.   <div class="player rotate" title="Alt+X"></div>
    
15.   <!--div class="bgprog"></div-->
    
16.   <div class="btnFs"></div>
    
17.   <svg class="svgprog" width="200" height="200">
    
18.     <g>
    
19.       <title>调节进度</title>
    
20.       <path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
    
21.       <path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
    
22.     </g>
    
23.   </svg>
    
24. </div>
    
25. 
    
26. <script>
    
27.   var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz2026.min.js';
    
28.   loadJs(jsFile, tzInit);
    
29. 
    
30.   var gc = `[00:00.600]大芳-分裂人格
    
31. [00:16.740]编曲&和声编写&混音：小皮
    
32. [00:17.520]和声：大芳
    
33. [00:17.760]录音：大芳
    
34. [00:18.990]一个人上下班
    
35. [00:22.920]一个人说晚安
    
36. [00:26.880]一个人吃早餐
    
37. [00:31.020]内心驯服不了的不安
    
38. [00:34.830]今天听哪首歌
    
39. [00:38.850]扮演哪种人格
    
40. [00:42.780]寻找哪段感情寄托
    
41. [00:46.800]用哪种情绪面对指责
    
42. [00:50.910]听说又有人分手了
    
43. [00:54.810]习惯了单身的你不怕寂寞
    
44. [00:59.820]看淡了现实还是被打败了
    
45. [01:03.840]眼泪却流不出了
    
46. [01:06.840]最偏爱那一首歌
    
47. [01:10.860]你最爱扮演哪种人格
    
48. [01:15.870]感情空白了该怎么找寄托
    
49. [01:19.920]哪种情绪才能自我安和
    
50. [01:58.890]又是一个周末
    
51. [02:02.850]周围都热闹着
    
52. [02:06.870]仿佛也只有我
    
53. [02:10.830]面对热闹不知所措
    
54. [02:14.820]听过好多的歌
    
55. [02:18.870]拥有几种人格
    
56. [02:22.800]其实还是有点难过
    
57. [02:26.820]城市很大你却迷失了
    
58. [02:30.810]现在听哪一首歌
    
59. [02:34.860]你又要扮演哪种人格
    
60. [02:39.870]感情已散了说好不在乎了
    
61. [02:43.890]情绪却控制不了了
    
62. [02:46.770]现代人的人格
    
63. [02:50.880]早已不再是同一种底色
    
64. [02:55.860]听哪一首歌扮演哪种人格
    
65. [02:59.880]我们是不是都不会痊愈了
    
66. [03:02.940]现在听哪一首歌
    
67. [03:06.870]你又要扮演哪种人格
    
68. [03:11.910]感情已散了说好不在乎了
    
69. [03:15.900]情绪却控制不了了
    
70. [03:18.840]现代人的人格
    
71. [03:22.920]早已不再是同一种底色
    
72. [03:27.930]听哪一首歌扮演哪种人格
    
73. [03:31.890]我们是不是都不会痊愈了
    
74. [03:39.810]天已快亮了你不用安慰我
    
75. [03:43.980]听完这首歌我们就会好的`;
    
76. 
    
77.   function loadJs(url, callback) {
    
78.     const script = document.createElement('script');
    
79.     script.charset = 'utf-8';
    
80.     script.src = url;
    
81.     script.defer = true;
    
82.     script.onload = callback;
    
83.     document.head.appendChild(script);
    
84.   }
    
85. 
    
86.   function tzInit() {
    
87.     var tz = TZ('pa');
    
88.     tz.start(gc);
    
89.   }
    
90. </script>

复制代码

凡哥

如果想使用HTML进度条，解开第十五行的注释，取代 17~23 行的 SVG 进度条，同时第 05 行的 .svgprog 改为 .bgprog

凡哥

tz2026 是一个简化的 tzMaker，唯一一个指令：

        tz.start();

该指令可带一个参数，用于发布歌词帖，例如二楼的代码，gc 是事先声明的原生LRC歌词变量，tz.start(gc)  就是传递歌词变量给 tz2026，发出来的就是歌词帖。

歌词标签对应的CSS选择器是 .lrc {}，帖子中可以用它来设置歌词个性化样式，例如歌词排版、歌词摆放位置等。

音频控制器可以是图片、视频、div等元素，确保 class 属性中有 player 即可，例如视频播放器：

        <video class="player vid" src="mp4地址"></video>

云端漫步

这样的原创作品值得赞赏！
也值得音画爱好者学习！
辛苦了

令狐冲

凡哥的特效很漂亮
五彩斑斓，缤纷绚烂
歌也好听。。。

凡哥

令狐冲 发表于 2026-3-6 22:42
凡哥的特效很漂亮
五彩斑斓，缤纷绚烂
歌也好听。。。

早上好！

凡哥

云端漫步 发表于 2026-3-6 13:22
这样的原创作品值得赞赏！
也值得音画爱好者学习！
辛苦了

感谢！早！