等你拥我入怀（DJ枫叶版）
本帖最后由 醉美水芙蓉 于 2022-6-12 20:11 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0">
<style>
.mnBox { left: -350px; width: 1280px; height: 700px; top:150px;position: relative; overflow: hidden; }
.mnBox::after { position: absolute; content: ''; width: 100%; height: 100%; background: transparent; z-index: 101; }
.video { width: 100%; height: 100%; object-fit: cover; position: absolute; }
.lrcWrap { position: absolute; padding: 430px; width: fit-content; height: fit-content; text-align: center; display: flex; flex-direction: column; z-index: 102;}
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.btn { width: 24px; height: 24px; background: olive; color: #ccc; border: none; font-size: 14px; outline: none; cursor: pointer; }
.btn:hover { color: 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: olive; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 370px; height: 72px;overflow: hidden; user-select: none; position: relative; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.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; }
</style>
<div class="mnBox">
<video class="video" src="https://img.tukuppt.com/video_show/2629112/00/01/89/5b4cab48793c5.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="lrcWrap">
<p>等你拥我入怀</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<input class="btn" type="button" value="||" />
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://www.qqmc.com/up/kwlink.php?id=217626867&.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
btn = document.querySelector('.btn');
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0.25;
let lrcAr = [
['3.04','等你拥我入怀（DJ枫叶版） - 思予'],
['5.24','作词: 清瑢'],
['7.34','作曲: 刘亦敏'],
['8.85','编曲: 王东'],
['10.53','录混: 小多'],
['13.91','LRC编辑：醉美水芙蓉'],
['22.71','何时依在你身边'],
['27.48','静静凝望你的脸'],
['32.91','何时靠在你胸前'],
['37.19','发丝穿过你指间'],
['43.01','何时雪融风儿暖'],
['48.04','桃花夭夭梦儿牵'],
['53.07','何时雨晴月儿绵'],
['57.66','荷香漫漫鱼儿欢'],
['63.19','我把相思串成线'],
['68.27','梦里系在你枕边'],
['73.30','你把月儿串成圆'],
['78.37','桥儿弯弯手儿牵'],
['83.25','你说我是你青莲'],
['88.51','我说你是我青衫'],
['93.45','只为那一刻相见'],
['98.52','拥我入怀到百年'],
['103.82',' ********'],
['123.81','何时雪融风儿暖'],
['128.87','桃花夭夭梦儿牵'],
['133.85','何时雨晴月儿绵'],
['138.21','荷香漫漫鱼儿欢'],
['143.99','我把相思串成线'],
['148.92','梦里系在你枕边'],
['154.09','你把月儿串成圆'],
['159.21','桥儿弯弯手儿牵'],
['164.23','你说我是你青莲'],
['169.34','我说你是我青衫'],
['174.28','只为那一刻相见'],
['179.20','拥我入怀到百年'],
['184.40','只为那一刻相见'],
['189.27','拥我入怀到百年'],
['209.40','谢谢欣赏！ ']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li style="list-style-type: none" id="li' + lrcAr + '">' + 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', () => btn.value = '\u25BA');
aud.addEventListener('play',() => btn.value = '||');
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
btn.onclick = () => aud.paused ? (aud.play(),btn.value = '||') : (aud.pause(),btn.value = '\u25BA');
function 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;
}
btn.value = aud.paused ? '\u25BA' : '||';
</script>
<br><br><br><br><br><br><br><br><br><br><br><br></td></tr></table>
我看了一下你的代码，JS中有个变量 slip，用于误差修正，一般赋值为零点几，你用的值是：
let slip = 9;
这是 9 秒的修正值！
我提供的脚本，默认值一般为 0.25 甚至是 0 你改这个值到合适的数字，一切OK 修改一下，然后看效果？ 马黑黑 发表于 2022-6-12 19:43
你改这个值到合适的数字，一切OK
谢谢黑黑老师指导！ok! 四海八荒 发表于 2022-6-12 19:45
修改一下，然后看效果？
谢谢四海老师支持！ 欣赏精彩制作！ 岩新新 发表于 2022-6-12 20:00
欣赏精彩制作！
岩新老师晚上好! 现在挺不错的 马黑黑 发表于 2022-6-12 19:43
你改这个值到合适的数字，一切OK
黑黑，我怎么按钮点击不了 这个视屏很浪漫。歌曲好听，制作漂亮，欣赏水芙蓉好帖{:4_187:} 红影 发表于 2022-6-12 21:51
这个视屏很浪漫。歌曲好听，制作漂亮，欣赏水芙蓉好帖
谢谢红影美女支持鼓励！ 小辣椒 发表于 2022-6-12 21:49
黑黑，我怎么按钮点击不了
这个帖子的按钮是没有问题的。如果刚刚评分，刷新一下就好。 马黑黑 发表于 2022-6-12 21:58
这个帖子的按钮是没有问题的。如果刚刚评分，刷新一下就好。
点击停止音乐还在，不点击停止，双音乐 制作得真漂亮，还是动态的。大赞！ 小辣椒 发表于 2022-6-12 22:00
点击停止音乐还在，不点击停止，双音乐
我这里没有这个现象，一切正常。 加林森 发表于 2022-6-12 22:17
制作得真漂亮，还是动态的。大赞！
谢谢队长支持鼓励！ 歌很好听。。。{:4_204:} 醉美水芙蓉 发表于 2022-6-12 22:58
谢谢队长支持鼓励！
比我制作得好！{:4_204:} 青青子衿 发表于 2022-6-12 23:09
歌很好听。。。
谢谢朋友支持！
页:
[1]
2