加加爱美人！{:5_112:}
加林森 发表于 2022-3-17 18:58
现在又完成一个了。小丫头看大美女。
嗯嗯，队长高产{:4_187:}
队长这制作真棒， 音乐图片融的非常好，动图也漂亮，赞！
晚上好！
{:4_204:}{:4_179:}
两只可爱的小蝶儿转圈儿起舞，那小娃娃依旧可爱。队长越做越精美了。还有那那彩字直接晃都不用牌牌了。厉害呵
本帖最后由 加林森 于 2022-6-14 22:09 编辑 <br /><br />樵歌 发表于 2022-3-17 20:09
两只可爱的小蝶儿转圈儿起舞，那小娃娃依旧可爱。队长越做越精美了。还有那那彩字直接晃都不用牌牌了。厉害 ...
哈哈，樵歌晚上好。小娃娃是播放器，彩字是用代码制作的。{:4_190:}
<style>
.mama { position: relative; left: -302.5px; width: 1201px; height: 660px; background: tan url('https://pic.imgdb.cn/item/62a84c4d0947543129585548.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid { position: absolute; width: 1345px; height: 799px; object-fit: cover; opacity: .3; }
.lrcWrap { position: absolute; top: 10px; left: 10px; 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; }
.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.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; 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="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb96f484078.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<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>
<audio class="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/12/8368ef6e37492580ee3e1e6e178b7de6.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
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; //误差修正
let lrcAr = [
['1.07','斯卡布罗集市 - 乔维怡'],
['16.05','Are you going to Scarborough Fair'],
['24.26','Parsley sage rosemary and thyme'],
['30.72','Remember me to one who lives there'],
['40.03','He once was a true love of mine'],
['48.82','Tell him to make me a cambric shirt'],
['58.36','Parsley sage rosemary and thyme'],
['67.25','Without no seams nor needle work'],
['76.24','Then he\'ll be a true love of mine'],
['87.83','Tell him to find me on acre of land'],
['95.31','Parsley sage, rosemary and thyme'],
['103.82','Between the salt water and the sea strand'],
['112.99','Then he\'ll be a true love of mine'],
['121.45','Tell him to reap it with a sickle of leather'],
['159.96','Parsley sage rosemary and thyme'],
['176.59','And gather it all in a bunch of heather'],
['184.85','Then he\'ll be a true love of mine'],
['193.15','Are you going to Scarborough Fair'],
['202.00','Parsley sage rosemary and thyme'],
['211.28','Remember me to one who lives there'],
['221.02','He once was a true love of mine'],
['222.02','加林森特此感谢老黑的指导！']
];
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>
大猫咪 发表于 2022-3-17 19:49
队长这制作真棒， 音乐图片融的非常好，动图也漂亮，赞！
晚上好！
猫猫晚上好。我才回家。你喜欢就好。{:4_204:}{:4_179:}
红影 发表于 2022-3-17 19:47
嗯嗯，队长高产
今天只制作了一个。{:4_189:}
加林森 发表于 2022-3-17 20:55
猫猫晚上好。我才回家。你喜欢就好。
非常棒 队长好分享{:4_187:}{:4_190:}
千羽 发表于 2022-3-17 19:21
哈哈，一大群
是啊，不能用的。
大猫咪 发表于 2022-3-17 20:57
非常棒 队长好分享
嗯嗯，我们都开心哈。{:4_204:}{:4_190:}
加林森 发表于 2022-3-17 20:58
是啊，不能用的。
我找素也是会找很多，可能一张也用不上{:4_181:}
加林森 发表于 2022-3-17 20:59
嗯嗯，我们都开心哈。
必须滴 {:4_179:}
千羽 发表于 2022-3-17 21:01
我找素也是会找很多，可能一张也用不上
是的是的
大猫咪 发表于 2022-3-17 21:02
必须滴
好的，再抱抱。{:4_179:}
东篱闲人 发表于 2022-3-17 19:22
加加爱美人！
肯定的。与你不一样的，你有一大群美女。。。{:4_189:}
加林森 发表于 2022-3-17 21:28
肯定的。与你不一样的，你有一大群美女。。。
没了。都换金票了。。。{:4_170:}
东篱闲人 发表于 2022-3-17 21:32
没了。都换金票了。。。
抛去了会再来，皇上威力大。。。{:4_172:}
加林森 发表于 2022-3-17 20:55
今天只制作了一个。
已经很不错了，{:4_187:}
红影 发表于 2022-3-17 23:02
已经很不错了，
谢谢！{:4_204:}
加林森 发表于 2022-3-17 23:12
谢谢！
准备下了，队长晚安{:4_187:}