《曾醉》 也曾年轻的歌词竖式马老师《什么果》代码学习

霜染枫丹

霜染枫丹

登录/注册后可看大图

霜染枫丹

竖式歌词更能和画面格式融合，看着更和谐

霜染枫丹

曾醉
作词：五子
作曲：Winky诗
演唱：HITA
山深问桃花染过几度春
哪一枝勾住过客衣上风尘
有倦意三分
要行路千程
怎记这山水静默待离人
轻舟邀斜月听岸上孤筝
回旋处恰趁醉踏青石前门
有余音两声
共与你微醺
融入这一夜长灯落满身
曾画下山间桃花流水逐云
跌破了一晌贪梦了无痕
倚泉浣笔重逢或偶遇洗不净
点墨片心留在归梦时分
斟满浮生在酒中浮与沉
哪一口填满岁月旧日余温
有醉意三分
都酿做前尘
梦醒后又在何处扮离人
红梅邀斜月听墙里孤筝
回旋处不是你惯唱的游吟
似乡音两声
唱今雪纷纷
错看成那年桃花落满身
曾见你山间走马落日长云
踏破了一声珍重无处闻
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平
用醉眼看不清擦肩人
酒醒后分不清假与真
行遍天涯旧约难记存
分岔太多归路不可寻
曾画下山间桃花流水逐云
跌破了一晌贪梦何处寻
倚泉浣笔
重逢或偶遇洗不净
点墨片心留在归梦时分
曾见你山间走马落日长云
踏破了一声珍重了无痕
敛花做酒
相送或独酌都太冷清
待到如今那池春水已平

红影

的确竖向歌词更契合竖版的帖子，只是小播没必要跟上去呢，即使上去了也再低点才好，否则和某些长歌词有重叠现象呢。

霜染枫丹

红影 发表于 2026-6-21 13:52
的确竖向歌词更契合竖版的帖子，只是小播没必要跟上去呢，即使上去了也再低点才好，否则和某些长歌词有重叠 ...

我就弄了个小播“自以为“的位置，下次制作时降下来一些。现在不敢编辑，担心歌词受影响

也曾年轻

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
   
3.    
   
4. 
   
5.     .pa {
   
6.         --offsetX: 0px;
   
7.         --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/21/6a36d4571ca23.gif') no-repeat center/cover;
   
8.         --ma-size: 12%;  
   
9.         width: 450px;   
   
10.         height: 800px;   
    
11.         position: relative;
    
12.         overflow: hidden;
    
13.     }
    
14. 
    
15.     .pa *, .pa *::before, .pa *::after {
    
16.         content: none !important;
    
17.     }
    
18.    
    
19. 
    
20.     #custom-lrc-container {
    
21.         position: absolute;
    
22.         top: 50px;     /*   定位显示的位置  */
    
23.         right: 30px;
    
24.         width: 2em;     /*   宽高与横排时反过来  */
    
25.         height: 80%;     
    
26.         writing-mode: vertical-rl;   /* 设为竖排   */
    
27.         z-index: 9999;
    
28.         pointer-events: none;
    
29.     }
    
30. 
    
31.   
    
32.     .lrc-line {
    
33.         position: absolute;
    
34.         left: 50%;
    
35.         transform: translateX(-50%);
    
36.         white-space: nowrap;
    
37.         color: #fefefe;
    
38.                                 color:darkgreen;
    
39.         font-size: 20px;   
    
40.         font-family: "隶书", "LiSu", serif;
    
41.         font-weight: normal;
    
42.         text-shadow: 0 0 12px rgba(0,0,0,0.8);
    
43.         opacity: 0;
    
44.         transition: opacity 0.5s ease, transform 0.5s ease;
    
45.         margin: 0;
    
46.         top: 0;
    
47.     }
    
48.    
    
49.     .lrc-line.active {
    
50.         opacity: 1;
    
51.         transform: translateX(-50%) scale(1.15);
    
52.         z-index: 10;
    
53.     }
    
54. 
    
55.    
    
56.     @media (max-aspect-ratio: 9/16) {
    
57.         .pa {
    
58.             width: 100vw;
    
59.             height: calc(100vw * 16 / 9);
    
60.         }
    
61.     }
    
62. 
    
63.     @media (min-aspect-ratio: 9/16) {
    
64.         .pa {
    
65.             width: calc(100vh * 9 / 16);
    
66.             height: 100vh;
    
67.         }
    
68.     }
    
69. </style>
    
70. 
    
71. <div class="pa">
    
72.     <div id="custom-lrc-container"></div>
    
73. </div>
    
74. 
    
75. <script type="module">
    
76.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    
77. 
    
78.     const tz = TZ.TZ('pa');
    
79. 
    
80.     tz.add('audio', '', '', { src: 'https://imgimg.qqdsw8.cn/view.php/915c88832e0049c6bd78acf0744ba633.mp3' });
    
81.     tz.add('video', '', 'pd-vid', {src: 'https://imgimg.qqdsw8.cn/view.php/2ec28ce2bc8f195e7a531771c6e8ff41.mp4'}).style('opacity: 0.5;');
    
82. 
    
83.     //
    
84.     tz.add('img', '', 'ma', {
    
85.         src: 'https://pic1.imgdb.cn/item/6a36c2802830ce602a508060.gif'
    
86.     })
    
87.     .style('right: 10px; bottom: 400px;')
    
88.     .playmp3();
    
89.    
    
90.     //
    
91.     tz.bgprog().style('bottom: 50%; color: #fefefe; width: 80%; ')
    
92.     tz.fs().style('left: 40px; top: 40px;');
    
93.     const lrcString = `
    
94. [00:04.45]曾醉
    
95. [00:06.33]作词：五子
    
96. [00:07.91]作曲：Winky诗
    
97. [00:10.10]演唱：HITA
    
98. [00:25.50]山深问桃花染过几度春
    
99. [00:29.65]哪一枝勾住过客衣上风尘
    
100. [00:36.34]有倦意三分
     
101. [00:38.38]要行路千程
     
102. [00:41.12]怎记这山水静默待离人
     
103. [00:49.95]轻舟邀斜月听岸上孤筝
     
104. [00:54.14]回旋处恰趁醉踏青石前门
     
105. [01:00.79]有余音两声
     
106. [01:02.98]共与你微醺
     
107. [01:04.90]融入这一夜长灯落满身
     
108. [01:13.09]曾画下山间桃花流水逐云
     
109. [01:18.43]跌破了一晌贪梦了无痕
     
110. [01:23.92]倚泉浣笔重逢或偶遇洗不净
     
111. [01:29.40]点墨片心留在归梦时分
     
112. [01:58.22]斟满浮生在酒中浮与沉
     
113. [02:02.17]哪一口填满岁月旧日余温
     
114. [02:08.79]有醉意三分
     
115. [02:10.90]都酿做前尘
     
116. [02:13.70]梦醒后又在何处扮离人
     
117. [02:22.39]红梅邀斜月听墙里孤筝
     
118. [02:26.85]回旋处不是你惯唱的游吟
     
119. [02:33.54]似乡音两声
     
120. [02:35.68]唱今雪纷纷
     
121. [02:37.64]错看成那年桃花落满身
     
122. [02:45.83]曾见你山间走马落日长云
     
123. [02:51.25]踏破了一声珍重无处闻
     
124. [02:56.70]敛花做酒
     
125. [02:58.57]相送或独酌都太冷清
     
126. [03:02.25]待到如今那池春水已平
     
127. [03:08.13]用醉眼看不清擦肩人
     
128. [03:13.70]酒醒后分不清假与真
     
129. [03:19.13]行遍天涯旧约难记存
     
130. [03:23.85]分岔太多归路不可寻
     
131. [03:29.41]曾画下山间桃花流水逐云
     
132. [03:34.88]跌破了一晌贪梦何处寻
     
133. [03:40.28]倚泉浣笔
     
134. [03:42.30]重逢或偶遇洗不净
     
135. [03:45.82]点墨片心留在归梦时分
     
136. [03:51.23]曾见你山间走马落日长云
     
137. [03:56.60]踏破了一声珍重了无痕
     
138. [04:02.05]敛花做酒
     
139. [04:03.82]相送或独酌都太冷清
     
140. [04:07.66]待到如今那池春水已平`;
     
141. 
     
142.     function initCustomLrc(lrcText) {
     
143.         const container = document.getElementById('custom-lrc-container');
     
144.         const lines = [];
     
145.         
     
146.         const lineRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
     
147.         const rawLines = lrcText.split('\n');
     
148.         
     
149.         rawLines.forEach(text => {
     
150.             const match = text.match(lineRegex);
     
151.             if (match) {
     
152.                 const minutes = parseInt(match[1]);
     
153.                 const seconds = parseInt(match[2]);
     
154.                 const milliseconds = parseInt(match[3]);
     
155.                 const time = minutes * 60 + seconds + milliseconds / 1000;
     
156.                 let content = match[4].trim();
     
157.                
     
158.                
     
159.                 content = content.replace(/&#\d+;/g, '').trim();
     
160.                
     
161.                 if (content) {
     
162.                     lines.push({ time, content, element: null });
     
163.                 }
     
164.             }
     
165.         });
     
166. 
     
167.         lines.forEach((line) => {
     
168.             const div = document.createElement('div');
     
169.             div.className = 'lrc-line';
     
170.             div.textContent = line.content;
     
171.             container.appendChild(div);
     
172.             line.element = div;
     
173.         });
     
174. 
     
175.         const audio = document.querySelector('.pa audio');
     
176.         
     
177.         if (audio) {
     
178.             audio.addEventListener('timeupdate', () => {
     
179.                 const currentTime = audio.currentTime;
     
180.                 let activeIndex = -1;
     
181. 
     
182.                 for (let i = 0; i < lines.length; i++) {
     
183.                     if (currentTime >= lines[i].time) {
     
184.                         activeIndex = i;
     
185.                     } else {
     
186.                         break;
     
187.                     }
     
188.                 }
     
189. 
     
190.                 lines.forEach((line, idx) => {
     
191.                     if (idx === activeIndex) {
     
192.                         line.element.classList.add('active');
     
193.                     } else {
     
194.                         line.element.classList.remove('active');
     
195.                     }
     
196.                 });
     
197.             });
     
198.             
     
199.             audio.addEventListener('ended', () => {
     
200.                  lines.forEach(line => line.element.classList.remove('active'));
     
201.             });
     
202.         }
     
203.     }
     
204. 
     
205.     setTimeout(() => {
     
206.         const audioEl = document.querySelector('.pa audio');
     
207.         if(audioEl) {
     
208.             initCustomLrc(lrcString);
     
209.         } else {
     
210.             const observer = new MutationObserver(() => {
     
211.                 const aud = document.querySelector('.pa audio');
     
212.                 if(aud) {
     
213.                     initCustomLrc(lrcString);
     
214.                     observer.disconnect();
     
215.                 }
     
216.             });
     
217.             observer.observe(document.querySelector('.pa'), { childList: true, subtree: true });
     
218.         }
     
219.     }, 500);
     
220.     let prog = document.querySelector('.prog');
     
221.     prog.style.transform = 'rotate(-90deg)';
     
222.     prog.style.cssText += 'left:300px;top:250px;color:brown;';
     
223. 
     
224. </script>

复制代码

梦江南

画面古风人物漂亮，制作精美，赞一个！

魏淑芬

欣赏枫丹好制作，音画好般配。
感觉小播的位置还是在进度条附近比较好，个见。