一水隔天涯（学习黑黑的歌词同步编辑）
<style>.mama { position: relative; left: -340px; width: 1280px; height: 650px; top: 150px; background: #333 url('https://pic.imgdb.cn/item/62a1d8320947543129ceb308.jpg') no-repeat; box-shadow: 2px 2px 4px #333; }
.lrcWrap { left: 580px; top: 100px; padding: 26px; width: fit-content; height: fit-content; border-radius: 50%; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; cursor: pointer; position: absolute; }
.lrcWrap p { margin: 0; padding: 10px; color: #ccc; font: bold 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; }
.meter { margin: 16px 0; position: relative; width: 120px; }
.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">
<div class="lrcWrap">
<p>一水隔天涯</p>
<div class="lrcBox">
<ul class="lrcUl"></ul>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
</div>
<audio class="aud" src="https://s1.ananas.chaoxing.com/sv-w7/audio/7d/5d/c8/66548c040b469453f0b7abea7288b110/audio.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcWrap = document.querySelector('.lrcWrap'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0; //同步时差
let lrcAr = [
['00.08','粤语演唱【一水隔天涯】'],
['22.82','艺人：童丽'],
['35.71','妹爱哥情重'],
['40.67','哥爱妹丰姿'],
['46.18','为了心头愿'],
['51.38','连理结双枝'],
['57.23','只是一水隔天涯'],
['62.39','不知相会在何时'],
['67.93','粤语演唱【一水隔天涯】'],
['77.82','绻恋惊回梦'],
['82.81','醒觉梦依稀'],
['88.22','独语痴情话'],
['93.37','聊以寄相思'],
['99.77','只为一水隔天涯'],
['104.71','不知相会在何时'],
['110.40','LRC编辑：小辣椒'],
['119.91','感谢黑黑分享精彩源码'],
['151.19','小别相逢多韵味'],
['157.59','长别无期那不悲'],
['163.56','往日欢笑难忘记'],
['168.59','你不归来我不依'],
['173.97','预计归来日'],
['180.76','哥却末知归'],
['186.56','旧约烟云逝'],
['191.62','劳燕各分飞'],
['197.27','只恨一水隔天涯'],
['202.37','不知相会在何时'],
['207.86','不知相会在何时'],
['220.73','LRC编辑：小辣椒'],
['235.24','谢谢欣赏'],
['249.14','']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
meter.value = prog;
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;
})
lrcWrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br> 黑黑，就是昨天的歌词编辑套用你的成功了，自己帖里面进去不行，不过这个最后好像我还是有问题的，黑黑帮我看看{:4_173:} 本来是浅白背景，歌词不是很明显，现在加了点颜色，就这样了{:4_173:} 黑黑这个还没有熟练，编辑器用惯了，这个做一个。我编辑器可以做好几个了{:4_173:} 歌词的字幕制作得真好，整个画面简介清晰，真棒！ 穿旗袍弹琵琶的画面感 小辣椒制作得真漂亮，歌词也是同步的，真好！{:4_199:} 梦油 发表于 2022-6-9 20:12
歌词的字幕制作得真好，整个画面简介清晰，真棒！
谢谢梦油欣赏{:4_187:} 顾-念 发表于 2022-6-9 20:12
穿旗袍弹琵琶的画面感
暖男就是有感觉的人{:4_173:} 加林森 发表于 2022-6-9 20:24
小辣椒制作得真漂亮，歌词也是同步的，真好！
队长你也是可以的，慢慢来 好清爽的图，小辣椒作业完成满分哦{:4_187:} 千羽 发表于 2022-6-9 20:53
好清爽的图，小辣椒作业完成满分哦
哇塞，千羽等黑黑来看看的{:4_173:} 小辣椒 发表于 2022-6-9 20:48
队长你也是可以的，慢慢来
好的。反正我也不急的，只有慢慢去制作了。 加林森 发表于 2022-6-9 21:13
好的。反正我也不急的，只有慢慢去制作了。
急不的，反正就是玩 清爽，漂亮。亲爱的真棒{:4_187:} 小辣椒 发表于 2022-6-9 19:43
黑黑这个还没有熟练，编辑器用惯了，这个做一个。我编辑器可以做好几个了
黑黑的和编辑器基本一样的用法啊，而且做出的可以直接用在帖子里，更方便呢{:4_173:} 挺好。我自知分享的代码都不复杂，应该都可以学会。 红影 发表于 2022-6-9 21:35
黑黑的和编辑器基本一样的用法啊，而且做出的可以直接用在帖子里，更方便呢
黑黑的这个歌词编辑只能用黑黑的代码，但那个歌词编辑器出来可以用H5播放器，还是有区别的 马黑黑 发表于 2022-6-9 21:39
挺好。我自知分享的代码都不复杂，应该都可以学会。
黑黑，你分享的代码玩论坛是最强大的{:4_178:} 小辣椒 发表于 2022-6-9 21:15
急不的，反正就是玩
是的。小辣椒你该唾觉了。下去哈，要乖的哦。我现在在花园抽烟呢。。