分裂人格

马黑黑

LRC

马黑黑

本帖测试 tzMaker 简化版 tz2026，代码:

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>

复制代码

马黑黑

第 15 行代码是预留代码，去掉其注释将启用 HTML 进度条，同时应删掉 17~23 行 SVG进度条代码，CSS中 05 行代码 .svgprog 改为 .bgprog。

进度条二选一：要么使用SVG进度条，要么使用html元素进度条。

歌词如果需要设置偏移量，13行代码，<div class="lrc">LRC</div>，加上一个 data-skip 属性设置，例如：

    <div class="lrc" data-skip="-0.2">LRC</div>

引号中的浮点数以秒为单位。

查看 tz2026 插件的 更多说明请移步： 回归传统：tz2026低调出场 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

梦江南

黑黑老师早上好！这么早就能享受精彩的音画。辛苦了！

梦江南

黑黑老师，本帖测试 tzMaker 简化版 tz2026，这是什么意思？电饭煲还有简化版吗？

杨帆

传统的，往往也是经典的， tzMaker 简化版 tz2026测试效果完美，谢谢马老师精彩示范

红影

马黑黑 发表于 2026-3-6 07:57
第 15 行代码是预留代码，去掉其注释将启用 HTML 进度条，同时应删掉 17~23 行 SVG进度条代码，CSS中 05 行 ...

一会再去看代码，先来看看分裂人格。这个歌名太有意思了

红影

这个设置真细腻，鼠标停留在进度条上还能看到所在点的时间。