千里共婵娟（学习黑黑最新版代码）
<style>/*帖子外层盒子*/
.outerbox {
position: relative;
left: -302px;
top:120px;
width: 1200px;
height: 675px;
overflow: hidden;
background: #0E0E36;
}
/*视频外层盒子*/
.shipin {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-clip-path: polygon(0 0%, 86% 0%, 86% 9%, 100% 9%, 100% 100%, 0% 100%);
}
/*人物图片调整盒子*/
.tupian {
position: absolute;
width: 200px;
height: 200px;
object-fit: cover;
right:380px;
top: 40px;
}
/*播放器外层盒子*/
.lrcWrap { position: absolute; left: 400px; top: 100px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; display: flex; flex-direction: column;align-items: center; }
/*播放控制外层盒子*/
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.btn { width: 24px; height: 24px; background: #3CC457; color: #ccc; border: none; font-size: 14px;
outline: none; cursor: pointer; }
/*播放按钮*/
.playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%);
cursor: pointer; }
/*播放按钮鼠标滑过*/
.playbtn:hover { background: red; }
/*暂停按钮*/
.pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color:
transparent #eee; display: none; cursor: pointer; }
/*暂停按钮鼠标滑过*/
.pausebtn:hover { border-color: transparent red; }
/*进度条*/
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
/*进度滑块*/
.slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
/*歌词面板外层文字盒子*/
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.3em sans-serif; text-shadow: 1px 1px 1px #333; }
/*歌词区域限制层*/
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px;overflow: hidden; user-select: none;
position: relative; }
/*歌词ul标签*/
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
/*歌词li标签*/
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
/*添加月亮旁边图片*/
.renwu { position: absolute;left:40px; top: 60px; width: 160px; height: 92px;opacity: .35;
background: url('https://pic.imgdb.cn/item/62a57d2e0947543129dd8325.png') no-repeat center/cover; }
/*添加小频谱动图*/
.pinpu { position: absolute;left:790px; top: 230px; width: 40px; height: 35px;opacity: .95;
background: url('https://pic.imgdb.cn/item/62a58e030947543129f49b59.gif') no-repeat center/cover; }
</style>
<div class="outerbox">
<video class="shipin" src="https://img.tukuppt.com/video_show/2422006/00/02/12/5b519a8074c45.mp4"
muted="muted" autoplay="autoplay" loop="loop"></video>
<div class="renwu"></div>
<!-- 播放器开始 -->
<div class="lrcWrap">
<p>〓〓千里共婵娟〓〓</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<div class="playbtn"></div>
<div class="pausebtn"></div>
<div class="meter"><span class="slider"></span></div>
</div>
</div>
<!-- 播放器结束 -->
<div class="pinpu"></div>
<div class="tupian">
<img alt="" src="https://pic.imgdb.cn/item/62a575ca0947543129d3f1c4.png"/></div>
<div style="position: absolute; left:140px; top: 320px; width:650px;opacity: .95;">
<img alt="" src="https://pic.imgdb.cn/item/624f9886239250f7c55c810d.gif"/></div>
</div><br><br><br><br><br><br>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1382790135.mp3" autoplay="autoplay"
loop="loop"></audio>
<script>
//N多盒子句柄
let aud = document.querySelector('.aud'),
playbtn = document.querySelector('.playbtn'),
pausebtn = document.querySelector('.pausebtn'),
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0; //误差修正
//lrc歌词数组
let lrcAr = [
['0.08','作词、作曲：程响'],
['7.32','演唱：程响'],
['13.52','代码及歌词技术：马黑黑'],
['20.52','学习制作：红影'],
['27.52','冬去春来 细雨绵绵'],
['33.29','花开四季 只等你来拈'],
['39.64','为你把 蜜语甜言'],
['43.28','化作柴米炊烟'],
['47.01','弯了眉眼 又红了脸'],
['53.94','茫茫人海 一眼如万年'],
['60.28','飘飘落落 你住心田'],
['65.91','从不闻红尘与繁喧'],
['69.59','素衣度华年'],
['73.20','可否归来 举杯尽欢言'],
['79.53','你说 此生不负良人千里共婵娟'],
['86.03','怎奈人去楼空似云烟'],
['92.54','白发青丝一瞬间'],
['95.85','三世轮回为少年'],
['99.60','可否 可否一续前缘'],
['119.80','茫茫人海 一眼如万年'],
['125.98','飘飘落落 你住心田'],
['131.49','从不闻红尘与繁喧'],
['135.24','素衣度华年'],
['139.17','可否归来 举杯尽欢言'],
['145.20','你说 此生不负良人千里共婵娟'],
['151.71','怎奈人去楼空似云烟'],
['158.24','白发青丝一瞬间'],
['161.52','三世轮回为少年'],
['165.19','可否 可否一续前缘'],
['171.65','你说 此生不负良人千里共婵娟'],
['177.99','怎奈人去楼空似云烟'],
['184.59','白发青丝一瞬间'],
['187.87','三世轮回为少年'],
['193.37','可否 可否一续前缘'],
['199.78','可否如愿'],
['206.58','感谢欣赏2022.6.12']
];
//将歌词写入li标签
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr
+ '</li>';
}
//监听进度
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
//监听结束事件
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
})
//监听暂停与播放
aud.addEventListener('pause', () => btnstate(1));
aud.addEventListener('play',() => btnstate(0));
//进度条点击事件
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
//暂停与播放按钮点击事件
pausebtn.onclick = () => { aud.pause(); btnstate(1); }
playbtn.onclick = () => { aud.play(); btnstate(0); }
//获取进度条偏移总量
let offset = (obj,direction) => {
let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
//按钮状态
let btnstate = (paused) => {
paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') :
(playbtn.style.display = 'none', pausebtn.style.display = 'block');
}
//初始化按钮状态
aud.paused ? btnstate(1) : btnstate(0);
</script> 红影朋友制图真美 亲爱的，精美的制作{:4_178:} 好聪明的，播放器里面加的频谱音标很相配的 学用结合完美{:4_199:} 听了两遍，这歌唱的有功底 但愿人长久，月亮代表我的心 海上升明月 {:4_191:} 梦油 发表于 2022-6-12 17:21
红影朋友制图真美
谢谢梦油，我只是跟在后面学呢{:4_173:} 小辣椒 发表于 2022-6-12 17:48
亲爱的，精美的制作
谢谢亲爱的，发现用视频做底图挺省力的，不用去找图了{:4_173:} 小辣椒 发表于 2022-6-12 17:49
好聪明的，播放器里面加的频谱音标很相配的
本来想加代码频谱的，没加成。就直接加了个小动图的{:4_173:} 小辣椒 发表于 2022-6-12 17:50
学用结合完美
多谢亲爱的{:4_179:} 马黑黑 发表于 2022-6-12 19:23
听了两遍，这歌唱的有功底
嗯，程响的嗓音还是不错的，好像第一个听的是她的等你归来，后面就记住这个歌手了。 四海八荒 发表于 2022-6-12 19:41
但愿人长久，月亮代表我的心
这个月亮水面是找的动图{:4_173:} 元时而 发表于 2022-6-12 21:40
呀，这个马甲都跑出来了啊{:4_189:} 红影 发表于 2022-6-13 15:20
谢谢梦油，我只是跟在后面学呢
你设计画面很协调，看起来很舒服，有一种美感。 红影 发表于 2022-6-13 15:23
嗯，程响的嗓音还是不错的，好像第一个听的是她的等你归来，后面就记住这个歌手了。
有实力的歌手 梦油 发表于 2022-6-13 15:32
你设计画面很协调，看起来很舒服，有一种美感。
主要这视频看着清凉，还有黑黑的代码漂亮{:4_173:} 马黑黑 发表于 2022-6-13 18:14
有实力的歌手
比较喜欢的嗓音{:4_204:}