空空如也

马黑黑

马黑黑

代码：

1. <style>
   
2. #papa { left: -214px; width: 1024px; height: 640px; background: #666 url('/data/attachment/forum/202209/06/074904leqeezdkdihvu6w4.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
   
3. #mplayer { position: absolute;right: 100px; bottom: 20px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
   
4. #track { stroke: url(#gradient); }
   
5. #lrc { position: absolute; display: block; top: 20px; }
   
6. #lrctxt { dominant-baseline: middle; fill: url(#gradient); font: bold 2.2em sans-serif; text-shadow: -2px -2px 0px snow, 2px 2px 3px #000; letter-spacing: 3px; }
   
7. </style>
   
8. 
   
9. <div id="papa">
   
10.         <div id="mplayer">
    
11.                 <svg width="100%" height="100%" shape-rendering="geometricPrecision">
    
12.                         <g transform="rotate(-90, 60, 60)">
    
13.                                 <circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.35" />
    
14.                                 <circle id="prog" cx="60" cy="60" r="55" fill="none" stroke="red" stroke-width="3" stroke-opacity="0.65"/>
    
15.                         </g>
    
16.                         <text fill="orange">
    
17.                                 <tspan id="cur" x="40" y="55">00:00</tspan>
    
18.                                 <tspan id="dur" x="40" y="75">00:00</tspan>
    
19.                         </text>
    
20.                 </svg>
    
21.         </div>
    
22.         <svg id="lrc" width="410" height="150">
    
23.                 <defs><path id="lrcPath" fill="none" stroke="red" d="M 20 20 Q 200 180 400 20" /></defs>
    
24.                 <defs>
    
25.                         <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
    
26.                                 <stop offset="0%" stop-color="blue"/>
    
27.                                 <stop offset="35%" stop-color="orange"/>
    
28.                                 <stop offset="65%" stop-color="gray"/>
    
29.                                 <stop offset="100%" stop-color="red"/>
    
30.                         </linearGradient>
    
31.                 </defs>
    
32.                 <text x="0" y="20"><textPath id="lrctxt" xlink:href="#lrcPath">任然 - 空空如也</textPath></text>
    
33.         </svg>
    
34. </div>
    
35. 
    
36. <script>
    
37. let lrcAr = [
    
38.         ['0.00','空空如也 - 任然'],
    
39.         ['14.06','熟悉的 陌生的 这种感觉'],
    
40.         ['17.04','重复的 曾经的 那些情节'],
    
41.         ['20.06','也只是 怀念'],
    
42.         ['26.07','一滴滴 一点点 一页一篇'],
    
43.         ['29.07','分手了 也不过 三百多天'],
    
44.         ['32.05','可我却 害怕遇见'],
    
45.         ['37.04','我懵懵懂懂过了一年'],
    
46.         ['40.04','这一年似乎没有改变'],
    
47.         ['43.05','守着你离开后的世界'],
    
48.         ['45.09','空 空如也'],
    
49.         ['49.06','白天和晚上都是冬夜'],
    
50.         ['52.06','悲伤的到来我从不拒绝'],
    
51.         ['57.03','反正亦是'],
    
52.         ['58.09','空空空空如也'],
    
53.         ['62.00','我懵懵懂懂过了一年'],
    
54.         ['65.01','徘徊在石板路的街边'],
    
55.         ['68.00','曾经笑容灿烂如今却'],
    
56.         ['70.05','空空如也'],
    
57.         ['74.02','一切的星光都已陨灭'],
    
58.         ['77.04','得过且过是我如今速写'],
    
59.         ['81.03','无所谓 让痛重叠'],
    
60.         ['111.05','我懵懵懂懂过了一年'],
    
61.         ['114.02','这一年似乎没有改变'],
    
62.         ['117.03','守着你离开后的世界'],
    
63.         ['119.07','空 空如也'],
    
64.         ['123.05','白天和晚上都是冬夜'],
    
65.         ['126.04','悲伤的到来我从不拒绝'],
    
66.         ['131.02','反正亦是'],
    
67.         ['132.08','空空空空如也'],
    
68.         ['135.09','我懵懵懂懂过了一年'],
    
69.         ['138.09','徘徊在石板路的街边'],
    
70.         ['141.09','曾经笑容灿烂如今却'],
    
71.         ['144.03','空空如也'],
    
72.         ['148.01','一切的星光都已陨灭'],
    
73.         ['151.00','得过且过是我如今速写'],
    
74.         ['155.01','无所谓 让痛重叠'],
    
75.         ['160.03','我懵懵懂懂过了一年'],
    
76.         ['163.05','这一年似乎没有改变'],
    
77.         ['166.07','守着你离开后的世界'],
    
78.         ['169.00','空 空如也'],
    
79.         ['172.08','白天和晚上都是冬夜'],
    
80.         ['175.08','悲伤的到来我从不拒绝'],
    
81.         ['180.04','反正亦是'],
    
82.         ['182.01','空空空空如也'],
    
83.         ['184.09','我懵懵懂懂过了一年'],
    
84.         ['188.01','徘徊在石板路的街边'],
    
85.         ['191.02','曾经笑容灿烂如今却'],
    
86.         ['193.05','空空如也'],
    
87.         ['197.04','一切的星光都已陨灭'],
    
88.         ['200.04','得过且过是我如今速写'],
    
89.         ['204.04','无所谓 让痛重叠']
    
90. ];
    
91. let aud = new Audio();
    
92. aud.src = 'https://music.163.com/song/media/outer/url?id=526464293.mp3';
    
93. aud.autoplay = true;
    
94. aud.loop = true;
    
95. 
    
96. let girth = prog.getTotalLength();
    
97. prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';
    
98. 
    
99. mplayer.onmousemove = (e) => {
    
100.         if (isHover(e.offsetX, e.offsetY))  mplayer.style.cursor = 'pointer';
     
101. }
     
102. 
     
103. mplayer.onclick = (e) => {
     
104.         if (isHover(e.offsetX, e.offsetY)) {
     
105.                 let deg = Math.atan2(e.offsetY - 60, e.offsetX - 60) * 180 / Math.PI;
     
106.                 deg += (e.offsetX < 60 && e.offsetY < 60) ?  450 : 90;
     
107.                 aud.currentTime = aud.duration * deg / 360;
     
108.         } else {
     
109.                 aud.paused ? aud.play() : aud.pause();
     
110.         }
     
111. }
     
112. 
     
113. aud.addEventListener('timeupdate', () => {
     
114.         prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
     
115.         cur.textContent = toMin(aud.currentTime);
     
116.         dur.textContent = toMin(aud.duration);
     
117.         for(j=0; j<lrcAr.length; j++) {
     
118.                 if(aud.currentTime >= lrcAr[j][0]) lrctxt.textContent = lrcAr[j][1];
     
119.         }
     
120. });
     
121. 
     
122. let isHover = (x,y) => Math.pow(x - 60, 2) + Math.pow(y - 60, 2) >= Math.pow(45, 2);
     
123. 
     
124. let toMin = (val)  => {
     
125.         if (!val) return '00:00';
     
126.         val = Math.floor(val);
     
127.         let min = parseInt(val / 60), sec = parseFloat(val % 60);
     
128.         if(min < 10) min = '0' + min;
     
129.         if(sec < 10) sec = '0' + sec;
     
130.         return min + ':' + sec;
     
131. }
     
132. </script>

复制代码

马黑黑

圆环播放器在HIGH歌基础上略作调整，将进度圆环的 stroke-width 设置为比轨迹圆环的小一点。

lrc歌词文本使用了路径（帖子中间“空空如也”四个字是图片自身设计的），

<path id="lrcPath" fill="none" stroke="red" d="M 20 20 Q 200 180 400 20" />

路径头尾用 <defs> ... </defs> 标签包裹，意在隐藏路径（路径不显示），也可以设置路径的 fill 和 stroke 为 none。

路径 id 要捆绑在 textPahth 里面。使用文本路径，textPath 是必须的，作为 text 的子标签并和 tspan 一样充当文本显示的角色

加林森

空了来学习。

红影

马黑黑 发表于 2022-9-6 08:00
圆环播放器在HIGH歌基础上略作调整，将进度圆环的 stroke-width 设置为比轨迹圆环的小一点。

lrc歌词文 ...

看到你设置成了3，这样那些散热片就能露出来了呢。
还设置了个弯弧标题呢，使用了svg里path路径，不知道这个功能以前讲过没有，即使讲过我也没记住，真正的《空空如也》

梦油

黑黑先生早晨好！你的制作独辟蹊径，出其不虞，很有新意。

红影

d="M 20 20 Q 200 180 400 20" 这里面的数字都代表什么啊，就是这些数字让文字弯曲的吧

梦缘

感谢老师的代码分享，欣赏学习，问好！

马黑黑

醉美水芙蓉 发表于 2022-9-6 11:41
欣赏学习黑黑老师佳作！

马黑黑

梦缘 发表于 2022-9-6 11:21
感谢老师的代码分享，欣赏学习，问好！

马黑黑

红影 发表于 2022-9-6 09:41
d="M 20 20 Q 200 180 400 20" 这里面的数字都代表什么啊，就是这些数字让文字弯曲的吧

svg路径很强大，用它可以绘制所有图形

马黑黑

梦油 发表于 2022-9-6 09:28
黑黑先生早晨好！你的制作独辟蹊径，出其不虞，很有新意。

马黑黑

加林森 发表于 2022-9-6 08:06
空了来学习。

马黑黑

红影 发表于 2022-9-6 09:20
看到你设置成了3，这样那些散热片就能露出来了呢。
还设置了个弯弧标题呢，使用了svg里path路径，不知道 ...

路径有讲过的

大猫咪

制作真棒，图片很有感觉，必须学习

马黑黑

大猫咪 发表于 2022-9-6 12:23
制作真棒，图片很有感觉，必须学习

加林森

马黑黑 发表于 2022-9-6 12:22

谢茶！

马黑黑

加林森 发表于 2022-9-6 12:24
谢茶！

客气了

加林森

马黑黑 发表于 2022-9-6 12:24
客气了

嗯嗯。