单标签原生lrc歌词帖子模板

马黑黑

代码来源于拙作《烛影》，修改后除了必不可少的音频标签，整个帖子模板就一个div标签，其伪元素 ::before 做歌词显示平台、::after 标签做播放器控制按钮。可扩展，就是说，可以添加其他修饰元素。具体代码尽量分行写，便于大家研究学习：

1. <style>
   
2. #tz {
   
3.         margin: 30px 0 30px calc(50% - 641px);
   
4.         width: 1280px;
   
5.         height: 720px;
   
6.         background: url('https://638183.freep.cn/638183/t24/2/vuyk.jpg') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 12px black;
   
8.         z-index: 1;
   
9.         pointer-events: none;
   
10.         position: relative;
    
11. }
    
12. #tz::before, #tz::after {
    
13.         position: absolute;
    
14.         content: '';
    
15. }
    
16. #tz::before {
    
17.         content: attr(data-lrc);
    
18.         bottom: 10px; width: 100%;
    
19.         height: 60px;
    
20.         text-align: center;
    
21.         font: normal 32px/60px sans-serif;
    
22.         color: transparent;
    
23.         background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px;
    
24.         background-clip: text;
    
25.         -webkit-background-clip: text;
    
26.         filter: drop-shadow(-1px -3px 2px cyan);
    
27. }
    
28. #tz::after {
    
29.         left: calc(50% - 50px);
    
30.         bottom: 80px;
    
31.         width: 100px;
    
32.         height: 100px;
    
33.         background: url('https://638183.freep.cn/638183/t23/btn/12f.png') no-repeat center/cover;
    
34.         filter: drop-shadow(0 0 40px cyan);
    
35.         pointer-events: auto;
    
36.         cursor: pointer;
    
37.         transition: .5s;        
    
38.         animation: rot 8s linear infinite var(--state);
    
39. }
    
40. #tz:hover::after {
    
41.         width: 110px;
    
42.         height: 110px;
    
43. }
    
44. @keyframes rot { to { transform: rotate(1turn); } }
    
45. </style>
    
46. 
    
47. <div id="tz" data-lrc="烛影" title="播放/暂停">
    
48.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1995785157" autoplay loop></audio>
    
49. </div>
    
50. 
    
51. <script>
    
52. var curkey = 0, lrcAr = [];
    
53. 
    
54. var getAr = (text) => {
    
55.         var ar = text.trim().split('\n');
    
56.         ar.sort();
    
57.         var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    
58.         ar.forEach(item => {
    
59.                 let result = item.match(reg);
    
60.                 let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
    
61.                 lrcAr.push([tmsg, result[4].trim()]);
    
62.         });
    
63. };
    
64. 
    
65. var mState = () => {
    
66.         tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
    
67.         tz.title = ['暂停','播放'][+aud.paused];
    
68. };
    
69. 
    
70. aud.onseeked = () => curkey = 0;
    
71. aud.onplaying = aud.onpause = () => mState();
    
72. aud.ontimeupdate = () => {
    
73.         if(curkey > lrcAr.length - 1) return;
    
74.         if(aud.currentTime >= lrcAr[curkey][0]) {
    
75.                 tz.dataset.lrc = lrcAr[curkey][1];
    
76.                 curkey ++;
    
77.         }
    
78. };
    
79. 
    
80. tz.onclick = () => aud.paused ? aud.play() : aud.pause();
    
81. 
    
82. getAr(lrc);
    
83. 
    
84. var lrc = `[00:00.500]WENDY·白 - 烛影\n[00:10.980]hey babe你不用太着急\n[00:13.470]we got time\n[00:14.580]屋外又下起了小雨\n[00:16.380]倒一杯红酒\n[00:17.580]窝进沙发里\n[00:19.230]轻晃的烛影藏着我们的秘密\n[00:22.830]Bing bing闪烁装有我的眼睛\n[00:25.590]纤细的手指不止能弹钢琴\n[00:28.530]do re mi fa so la si如果你想听\n[00:33.750]找部电影其实你早看过了\n[00:36.690]管他呢谁不世界的过客\n[00:39.510]反正到最后也没几人会记得\n[00:43.560]youdon't have to say sorry\n[00:45.630]怎么会有那么多顾虑\n[00:48.150]我们之间已经隔了太多的事情\n[00:50.820]不止玻璃流下雨滴\n[00:52.440]什么工具能留住香气\n[00:57.060]close get close to紧扣的掌心\n[01:02.400]我的耳朵只听得见你的声音\n[01:07.980]统一的心率连着呼吸\n[01:10.590]像棉花糖融化进了水里\n[01:14.340]（ only u）在我身边调动情绪才是安心\n[01:19.620]please back my butterfly\n[01:25.290]第一眼的喜欢你让我怎么释怀\n[01:30.810]我试着调整了没有你的生活状态\n[01:36.510]看起来多彩\n[01:37.770]对我而言还是黑白\n[01:42.420]please back my butterfly\n[01:48.090]只有把你变成记忆才不会被人打败\n[01:53.640]你是否也会在某个时间突然想起我来\n[01:59.520]顺风入怀＞三十六度温暖\n[02:05.550]回忆不攻自破\n[02:07.710]带着花纹心的脉络\n[02:10.590]他们劝我忘了\n[02:12.030]忘了这本不该发生的\n[02:16.110]（ how can i do that）\n[02:16.440]怎么忘了挂着小兔子的（蓝色）毛衣\n[02:19.260]怎么忘了你那闪烁装有我的眼睛\n[02:22.410]怎么忘了烛影里藏着我们的秘密\n[02:28.500]不止玻璃流下雨滴\n[02:34.020]什么工具能留住香气\n[02:40.800]close紧扣的掌心\n[02:42.480]统一的心率连着呼吸\n[02:45.540]我的耳朵快要忘记（你的声音）`;
    
85. 
    
86. </script>

复制代码

南无月

这个直接给了个小花播的图片，不用那么复杂的绕圈圈，使用更方便啦。

红影

两个伪元素，一个按钮一个歌词，最精简的应用，很赞

红影

“整个帖子模板就一个div标签”这话咋有点那么显摆呢
不过的确很简洁，而且这个帖子的歌词阴影效果特别好

马黑黑

红影 发表于 2024-6-19 23:11
两个伪元素，一个按钮一个歌词，最精简的应用，很赞

不过代码看起来也不是很少

马黑黑

南无月 发表于 2024-6-19 22:53
这个直接给了个小花播的图片，不用那么复杂的绕圈圈，使用更方便啦。

圈圈也是很好看的

马黑黑

红影 发表于 2024-6-19 23:13
“整个帖子模板就一个div标签”这话咋有点那么显摆呢
不过的确很简洁，而且这个帖子的歌词阴影效 ...

CSS做了很多工作

南无月

马黑黑 发表于 2024-6-19 23:13
圈圈也是很好看的

变身的圈圈更好看，刚看到一个效果。。真是绝了

起个网名好难

思路很巧妙。

82和84 要对调一下吧，歌词似乎不动啊。

马黑黑

起个网名好难 发表于 2024-6-20 09:00
思路很巧妙。

82和84 要对调一下吧，歌词似乎不动啊。

嗯，一般是先赋值再调用

红影

马黑黑 发表于 2024-6-19 23:13
不过代码看起来也不是很少

能用原生歌词的，应该是最少量的代码了呢

红影

马黑黑 发表于 2024-6-19 23:14
CSS做了很多工作

是的，可以让歌词变成各种想要的效果

马黑黑

红影 发表于 2024-6-20 18:36
是的，可以让歌词变成各种想要的效果

马黑黑

红影 发表于 2024-6-20 18:35
能用原生歌词的，应该是最少量的代码了呢

不会呀。花潮格式的lrc最好，代码量更少，唯一麻烦的是多个制作歌词流程，很多人包括资深做帖人 @小辣椒 都不太愿意去做。花潮格式的lrc还能轻松实现逐字模拟功能，这个原生的就比较麻烦了：它通常是通过空歌词告诉执行系统，这是我上一句结束的时间，通常还没有或不准确，然后就需要一个笼统的算法（我曾经做过，也发布在论坛里）去测算，得个大致的结果而已。

红影

马黑黑 发表于 2024-6-20 18:49

这些效果都好美呢

红影

马黑黑 发表于 2024-6-20 18:54
不会呀。花潮格式的lrc最好，代码量更少，唯一麻烦的是多个制作歌词流程，很多人包括资深做帖人 @小辣 ...

是的，最准确的还是花潮歌词，但是原生歌词对用的人来说更省力

马黑黑

红影 发表于 2024-6-20 22:04
是的，最准确的还是花潮歌词，但是原生歌词对用的人来说更省力

有得有失

马黑黑

红影 发表于 2024-6-20 22:02
这些效果都好美呢

还不差

红影

马黑黑 发表于 2024-6-20 22:20
有得有失

我倒是挺喜欢自己去弄歌词，比较放心，搜来的有时是不对的。

红影

马黑黑 发表于 2024-6-20 22:20
还不差

黑黑的东西怎可能差呢，你是我们心目中神一样的存在