重低音纯电音之重金属深水炸弹

小辣椒

黑黑新品层出不穷

小辣椒

黑黑，今天我一个晚上做那个视频当小波的，加二个特效上去没有成功，就是你以前分享过的
我想加2个图片进去，和播放器连控，没有成功

那个人- 歌手：夜星晨
https://www.huachaowang.com/foru ... 80&fromuid=4275
(出处: 花潮论坛)

小辣椒

感觉自己也是真不行了

马黑黑

小辣椒 发表于 2025-11-26 22:25
黑黑，今天我一个晚上做那个视频当小波的，加二个特效上去没有成功，就是你以前分享过的
我想加2个图片进 ...

我理解你的意思是：加入的两个图片也可以通过点击控制音频。若如此，改造一下代码即可，如下：

1. <style>
   
2.     #papa {margin: 150px 0 30px calc(50% - 798px); width: 1440px; height: 803px; position: relative; background: silver url('https://xlaj.cn/upfile/202411/14/bj.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px rgba(0,0,0,.6); overflow: hidden; display: grid; place-items: center; --state: paused; }
   
3.     #mplayer { position: absolute; left: 480px; bottom: 80px; text-align: center; color:AliceBlue; }
   
4.     #mplayer p { margin: 0; padding: 0; cursor: pointer; }
   
5.     #mprog { width: 280px; accent-color: GoldEnrod; outline: none; cursor: pointer; }
   
6.     #btnplay { width: 75px; animation: rotating 6s infinite linear var(--state); }
   
7.     #lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(180deg,hsla(80,50%,20%,.20),hsla(80,50%,20%,.35)); position: absolute; left: 39%; bottom: 37px;  font:normal 1.6em Microsoft YaHei; sans-serif; color:MintCream; white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
   
8.     #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
   
9.     #vid { position: absolute; width: 472px; height: 362px; left: 55px; top:54px; object-fit: cover; aspect-ratio: 1; border-radius: 50%; cursor: pointer; mix-blend-mode: opacity: .9 }
   
10.     /* ipic 和 ipic1 改 class选择器为 id 选择器 */
    
11.     #ipic { position: absolute; ; width: 100px; height: 100px; left: 820px;top:340px; mix-blend-mode: multiply; animation: rotating 6s infinite var(--state); }
    
12.     #ipic1 { position: absolute; width: 100px; height: 100px;left: 540px;top:120px; animation: rotating 6s infinite var(--state); }
    
13.     @keyframes cover1 { from { width: 0%; }  to { width: 100%; } }
    
14.     @keyframes cover2 { from { width: 0%; }  to { width: 100%; } }
    
15.     @keyframes rotating { to { transform: rotate(360deg); } }
    
16. </style>
    
17. 
    
18. <div id="papa">
    
19.     <img id="ipic1" alt="" src="https://xlaj.cn/upfile/202411/14/01.png" />
    
20.     <img id="ipic" alt="" src="https://xlaj.cn/upfile/202411/14/02.png" />
    
21.     <audio src="https://xlaj.cn/upfile/202411/14/ngr.mp3" autoplay loop></audio>
    
22.     <video id="vid" src="https://china-img.soulapp.cn/video/2022-10-30/44d9a2b9-1ca1-49b7-83ed-2d6c69b44412.mp4" loop muted oncontextmenu="return false"></video>
    
23.     <div id="mplayer">
    
24.         <p><img id="btnplay" src="https://xlaj.cn/upfile/202411/14/2.png" title="播放/暂停" alt="" /></p>
    
25.         <p>
    
26.             <output id="mdu">0:00</output>
    
27.             <input id="mprog" type="range" min="0" step="1" max="100" value="0" title="调节进度" />
    
28.             <output id="mcur">0:00</output>
    
29.         </p>
    
30.     </div>
    
31.     <div id="lrc" data-lrc="HuaChao">HuaChao </div>
    
32. </div>
    
33. 
    
34. <script>
    
35.     const geci = [['0.00', '那个人- 夜星晨 ',4.85],
    
36. ['5.11', '视频制作：小风 ',4.25],
    
37. ['9.58', '记得第一眼见到你',3.86],
    
38. ['14.70', '那时你笑得甜蜜',3.91],
    
39. ['19.87', '辗转反侧难忘掉',3.80],
    
40. ['24.92', '始终记得你笑意',3.92],
    
41. ['30.10', '后来我们手牵手',3.75],
    
42. ['35.10', '说过余生一起走',3.98],
    
43. ['40.34', '可是老天不眷顾',3.84],
    
44. ['45.44', '丢我一人在后头',3.91],
    
45. ['50.61', '感情没有对与错',3.74],
    
46. ['55.60', '没有想过会错过',3.92],
    
47. ['60.78', '本来老天已注定',3.90],
    
48. ['65.94', '此生你会遇到我',3.91],
    
49. ['71.11', '我已用心去爱你',3.72],
    
50. ['76.08', '可是还是要分离',3.99],
    
51. ['81.33', '丢我一人在原地',3.85],
    
52. ['86.43', '往事在美已回不去',4.65],
    
53. ['92.38', '。。。。。。',18.80],
    
54. ['112.17', '回忆曾经的美好',3.90],
    
55. ['117.33', '心中还是忘不掉',3.87],
    
56. ['122.46', '当初我们多恩爱',3.71],
    
57. ['127.42', '最后你还是要逃',3.89],
    
58. ['132.57', '曾经回忆忘不掉',3.98],
    
59. ['137.81', '我还记得你的好',3.83],
    
60. ['142.89', '可是再也回不去',3.90],
    
61. ['148.05', '让我怎能来忘掉',5.07],
    
62. ['153.44', '还盼望你能回来',3.60],
    
63. ['158.28', '回来我们能相爱',3.81],
    
64. ['163.34', '可是一切回不去',3.73],
    
65. ['168.32', '一段故事一场意外',4.26],
    
66. ['173.86', '可惜天空不作美',3.68],
    
67. ['178.79', '我们没能配成对',3.89],
    
68. ['183.94', '到头还是一场空',3.82],
    
69. ['189.01', '最后还是终成灰',3.90],
    
70. ['194.17', '到头还是一场空',3.87],
    
71. ['199.30', '最后还是终成灰',4.12],
    
72. ['209.69', '谢谢欣赏',4.17],
    
73. ['224.29', '',4.5]
    
74. ];
    
75.     const sf = document.createElement('script');
    
76.     sf.src = 'https://638183.freep.cn/638183/web/js/lrcku_range.js';
    
77.     sf.charset = 'utf-8';
    
78.     document.querySelector('body').appendChild(sf);
    
79.     //vid.onclick = () => aud.paused ? aud.play() : aud.pause(); //这句不要
    
80.     // 视频和两个图片元素参与到小播行列
    
81.     [vid, ipic, ipic1].forEach(b => b.onclick = () => aud.paused ? aud.play() : aud.pause());
    
82. </script>

复制代码

要点：需要监听视频元素、图片元素的点击事件，它们的作用都一样，故此将其id加入到数组中，然后遍历数组，指派每一个元素的监听工作。代码再倒数第二行。

步骤：

（一）将CSS代码的 .ipic 和 .ipic1 两个 class 选择器名称改为 id 选择器，#ipic 和 #ipic1；
（二）将HTML代码中的两张图片的 class="..." 改为 id="..."；
（三）删掉JS代码中视频 vid 的监听事件，改用上述代码倒数第二行的组合监听事件。

小辣椒

马黑黑 发表于 2025-11-26 22:54
我理解你的意思是：加入的两个图片也可以通过点击控制音频。若如此，改造一下代码即可，如下：

要点： ...

谢谢黑黑，几天太迟了，我明天晚上再继续了，先下了，晚安

小辣椒

马黑黑 发表于 2025-11-26 22:54
我理解你的意思是：加入的两个图片也可以通过点击控制音频。若如此，改造一下代码即可，如下：

要点： ...

我看见的是原来的播放器不是现在的那种

小辣椒

明天晚上去按说明去做一次，先晚安了