我想加2个图片进去，和播放器连控，没有成功
那个人- 歌手：夜星晨
https://www.huachaowang.com/forum.php?mod=viewthread&tid=80080&fromuid=4275
(出处: 花潮论坛)
感觉自己也是真不行了{:4_198:} 小辣椒 发表于 2025-11-26 22:25
黑黑，今天我一个晚上做那个视频当小波的，加二个特效上去没有成功，就是你以前分享过的
我想加2个图片进 ...
我理解你的意思是：加入的两个图片也可以通过点击控制音频。若如此，改造一下代码即可，如下：
<style>
#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; }
#mplayer { position: absolute; left: 480px; bottom: 80px; text-align: center; color:AliceBlue; }
#mplayer p { margin: 0; padding: 0; cursor: pointer; }
#mprog { width: 280px; accent-color: GoldEnrod; outline: none; cursor: pointer; }
#btnplay { width: 75px; animation: rotating 6s infinite linear var(--state); }
#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; }
#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); }
#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 }
/* ipic 和 ipic1 改 class选择器为 id 选择器 */
#ipic { position: absolute; ; width: 100px; height: 100px; left: 820px;top:340px; mix-blend-mode: multiply; animation: rotating 6s infinite var(--state); }
#ipic1 { position: absolute; width: 100px; height: 100px;left: 540px;top:120px; animation: rotating 6s infinite var(--state); }
@keyframes cover1 { from { width: 0%; }to { width: 100%; } }
@keyframes cover2 { from { width: 0%; }to { width: 100%; } }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<img id="ipic1" alt="" src="https://xlaj.cn/upfile/202411/14/01.png" />
<img id="ipic" alt="" src="https://xlaj.cn/upfile/202411/14/02.png" />
<audio src="https://xlaj.cn/upfile/202411/14/ngr.mp3" autoplay loop></audio>
<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>
<div id="mplayer">
<p><img id="btnplay" src="https://xlaj.cn/upfile/202411/14/2.png" title="播放/暂停" alt="" /></p>
<p>
<output id="mdu">0:00</output>
<input id="mprog" type="range" min="0" step="1" max="100" value="0" title="调节进度" />
<output id="mcur">0:00</output>
</p>
</div>
<div id="lrc" data-lrc="HuaChao">HuaChao </div>
</div>
<script>
const geci = [['0.00', '那个人- 夜星晨 ',4.85],
['5.11', '视频制作：小风 ',4.25],
['9.58', '记得第一眼见到你',3.86],
['14.70', '那时你笑得甜蜜',3.91],
['19.87', '辗转反侧难忘掉',3.80],
['24.92', '始终记得你笑意',3.92],
['30.10', '后来我们手牵手',3.75],
['35.10', '说过余生一起走',3.98],
['40.34', '可是老天不眷顾',3.84],
['45.44', '丢我一人在后头',3.91],
['50.61', '感情没有对与错',3.74],
['55.60', '没有想过会错过',3.92],
['60.78', '本来老天已注定',3.90],
['65.94', '此生你会遇到我',3.91],
['71.11', '我已用心去爱你',3.72],
['76.08', '可是还是要分离',3.99],
['81.33', '丢我一人在原地',3.85],
['86.43', '往事在美已回不去',4.65],
['92.38', '。。。。。。',18.80],
['112.17', '回忆曾经的美好',3.90],
['117.33', '心中还是忘不掉',3.87],
['122.46', '当初我们多恩爱',3.71],
['127.42', '最后你还是要逃',3.89],
['132.57', '曾经回忆忘不掉',3.98],
['137.81', '我还记得你的好',3.83],
['142.89', '可是再也回不去',3.90],
['148.05', '让我怎能来忘掉',5.07],
['153.44', '还盼望你能回来',3.60],
['158.28', '回来我们能相爱',3.81],
['163.34', '可是一切回不去',3.73],
['168.32', '一段故事一场意外',4.26],
['173.86', '可惜天空不作美',3.68],
['178.79', '我们没能配成对',3.89],
['183.94', '到头还是一场空',3.82],
['189.01', '最后还是终成灰',3.90],
['194.17', '到头还是一场空',3.87],
['199.30', '最后还是终成灰',4.12],
['209.69', '谢谢欣赏',4.17],
['224.29', '',4.5]
];
const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/lrcku_range.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
//vid.onclick = () => aud.paused ? aud.play() : aud.pause(); //这句不要
// 视频和两个图片元素参与到小播行列
.forEach(b => b.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>要点：需要监听视频元素、图片元素的点击事件，它们的作用都一样，故此将其id加入到数组中，然后遍历数组，指派每一个元素的监听工作。代码再倒数第二行。
步骤：
（一）将CSS代码的 .ipic 和 .ipic1 两个 class 选择器名称改为 id 选择器，#ipic 和 #ipic1；
（二）将HTML代码中的两张图片的 class="..." 改为 id="..."；
（三）删掉JS代码中视频 vid 的监听事件，改用上述代码倒数第二行的组合监听事件。
马黑黑 发表于 2025-11-26 22:54
我理解你的意思是：加入的两个图片也可以通过点击控制音频。若如此，改造一下代码即可，如下：
要点： ...
谢谢黑黑，几天太迟了，我明天晚上再继续了，先下了，晚安 马黑黑 发表于 2025-11-26 22:54
我理解你的意思是：加入的两个图片也可以通过点击控制音频。若如此，改造一下代码即可，如下：
要点： ...
我看见的是原来的播放器不是现在的那种 明天晚上去按说明去做一次，先晚安了 小辣椒 发表于 2025-11-26 23:01
我看见的是原来的播放器不是现在的那种
不同的实现机制，方法肯定不同。tzMaker 这样加图片并做小播：
tz.add('img', '', 'ipic').playmp3(); 小辣椒 发表于 2025-11-26 23:04
明天晚上去按说明去做一次，先晚安了
88 小播和进度的叠加真好看，色彩的设计也那么柔和，很赞{:4_199:} 红影 发表于 2025-11-26 23:15
小播和进度的叠加真好看，色彩的设计也那么柔和，很赞
晚上嚎 马黑黑 发表于 2025-11-26 20:11
早上来听，比晚上更加震憾。 樵歌 发表于 2025-11-27 08:02
早上来听，比晚上更加震憾。
早晨空气洁净，阳气已成待升，利于声音保真传播
页:
1
[2]