《左手指月》- 萨顶顶 （学习老黑歌词同步及视频制作）
本帖最后由 加林森 于 2022-6-14 13:23 编辑 <br /><br /><style>.mama { position: relative; left: -302.5px; width: 1201px; height: 539px; background: tan url('https://pic.imgdb.cn/item/62a7f99c0947543129e21b52.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/bf23c985208b542ffe70aa4d681f811c.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.30','左手指月--萨顶顶'],
['2.80','作词 : 喻江'],
['3.84','作曲 : 萨顶顶'],
['25.02','左手握大地右手握着天'],
['30.55','掌纹裂出了十方的闪电'],
['36.32','把时光匆匆兑换成了年'],
['42.81','三千世 如所不见'],
['50.69','左手拈着花右手舞着剑'],
['55.57','眉间落下了一万年的雪'],
['62.96','一滴泪 啊啊啊'],
['69.57','那是我 啊啊啊'],
['77.35','左手一弹指右手弹着弦'],
['107.99','舟楫摆渡在忘川的水间'],
['115.32','当烦恼能开出一朵红莲'],
['122.08','莫停歇 给我杂念'],
['129.41','左手指着月右手取红线'],
['135.22','赐予你和我如愿的情缘'],
['141.99','月光中 啊啊啊'],
['148.53','你和我 啊啊啊'],
['168.33','左手化成羽右手成鳞片'],
['173.31','某世在云上某世在林间'],
['181.48','愿随你用一粒微尘的模样'],
['187.71','在所有 尘世浮现'],
['195.47','我左手拿起你右手放下你'],
['201.14','合掌时你全部被收回心间'],
['207.77','一炷香 啊啊啊'],
['214.06','你是我 无二无别']
];
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-6-14 12:12
萨顶顶菇凉有气势……鹅鹅鹅，我是说，帖子做的太有气势了。赞。
哈哈，都有气势的。{:4_191:} 加林森 发表于 2022-6-14 12:15
哈哈，都有气势的。
也是，都有 马黑黑 发表于 2022-6-14 12:15
也是，都有
是啊。听了这歌曲就赶紧去找图片了。就对这张图片有感觉。就开始制作了。 加林森 发表于 2022-6-14 12:20
是啊。听了这歌曲就赶紧去找图片了。就对这张图片有感觉。就开始制作了。
你已经进入你师父 @小辣椒的创作境界了，恭喜你！ 干嘛老call不动 @小辣椒 马黑黑 发表于 2022-6-14 12:20
你已经进入你师父 @小辣椒的创作境界了，恭喜你！
谢谢你！都是你教得好。在我师傅小辣椒的开导下才制作出来的。 马黑黑 发表于 2022-6-14 12:21
干嘛老call不动 @小辣椒
{:4_203:} 似雾、似海、似云……好美！ 梦油 发表于 2022-6-14 14:45
似雾、似海、似云……好美！
喜欢吧。 加林森 发表于 2022-6-14 14:58
喜欢吧。
这也是一种朦胧美。 梦油 发表于 2022-6-14 15:37
这也是一种朦胧美。
有点梦幻的感觉。 加林森 发表于 2022-6-14 16:09
有点梦幻的感觉。
是的，是的。 梦油 发表于 2022-6-14 16:44
是的，是的。
嗯嗯 醉美水芙蓉 发表于 2022-6-14 16:57
队长好厉害，做得非常漂亮！
一般一般。 这场境也太美了吧 绿叶清舟 发表于 2022-6-14 18:01
这场境也太美了吧
是的。我换了三张背景，制作不同的帖呢。{:4_189:}
页:
[1]
2