再见莫妮卡
<style>.mama { position: relative; left: -302px; width: 1200px; height: 600px; background: transparent linear-gradient(to right bottom, black, snow); box-shadow: 2px 2px 2px #444; }
.mpic { position: absolute; width: 600px; height: 600px; left: 0; top: 0; box-reflect: right; -webkit-box-reflect: right; opacity: .6;}
.lrcWrap { position: absolute; bottom: 10px; left: calc(50% - 220px); padding: 20px; width: fit-content; height: fit-content; text-align: center; background: rgba(0,0,0,.4) linear-gradient(rgba(0,0,0,.45), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #aaa; 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 16px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="mama">
<img class="mpic" src="/data/attachment/forum/202206/12/173034o4hd8r8tg6h8gm8s.png" alt="" style="-webkit-box-reflect: right" />
<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="https://music.163.com/song/media/outer/url?id=1824045033.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 = [
['0.11','作词 : Franky弗兰奇'],
['1.67','作曲 : Franky弗兰奇'],
['2.34','OP：北京合纵时代科技有限公司'],
['3.08','出品：网易飓风工作室'],
['14.18','[彭席彦]月光温柔缠绵'],
['16.15','迷雾模糊你的脸'],
['19.63','教唆蜜语甜言'],
['24.32','话都说了一万遍'],
['27.75','你转身就不见'],
['30.37','只能心里默念'],
['36.24','[弗兰奇]爱过了你变成我的秘密'],
['38.59','你走得轻没带走一片乌云'],
['41.28','把我的回忆葬在这里 过去'],
['44.20','时间往前走不留一丝痕迹'],
['48.30','过程中是谁浑浑噩噩 先比我开了口'],
['50.98','现实中过了这么多年 也没想放过手'],
['53.71','通常结局很轻松 也许也很平庸'],
['56.87','坏人不停敲打 你内心的警钟'],
['60.35','[弗+彭]一个人想想想想到心痛「怎么能够不懂」'],
['65.73','情绪一点点点点到失控「变得有恃无恐」'],
['71.53','灰色记忆夜的假面'],
['74.24','失手风筝折断了线'],
['77.22','咖啡不断加加加 加到厌倦'],
['82.76','[彭]月光温柔缠绵'],
['84.89','迷雾模糊你的脸'],
['88.36','教唆蜜语甜言'],
['92.88','话都说了一万遍'],
['96.33','你转身就不见'],
['99.06','只能心里默念'],
['104.96','[弗]Monica 你黑色的长发'],
['107.06','这些年时间快到让你根本停不下'],
['109.88','我越来越害怕 你眼睛眨呀眨'],
['112.85','他们都说你来自西域故事的神话'],
['115.64','也听过他们骂 还是根本放不下'],
['118.43','在钱包里面 你的照片一直没变化'],
['121.46','请记住我的话 我唯一的牵挂'],
['124.26','Goodbye my love 我最爱的Monica'],
['128.60','[彭]月光温柔缠绵'],
['130.51','迷雾模糊你的脸'],
['134.26','教唆蜜语甜言'],
['138.78','话都说了一万遍'],
['142.10','你转身就不见'],
['144.62','只能心里默念'],
['151.35','[彭+弗]流星坠落以前'],
['153.14','彼此许下了心愿'],
['156.09','（我说了爱你你却听不到）'],
['157.41','那迷人的誓言'],
['161.49','歌都唱了一千年'],
['164.91','我的心未变'],
['167.53','（半夜醒来还是睡不着 那些疼痛伤口没有痊愈过的药）'],
['169.50','对你说声再见']
];
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_173:} 黑黑真的厉害。这个歌词毫秒不差，我是老有不同步的{:4_201:} 小辣椒 发表于 2022-6-12 17:42
沙发我的
{:4_174:} 马黑黑 发表于 2022-6-12 18:04
黑黑你的地盘那个是新的歌词同步最后版本吧 小辣椒 发表于 2022-6-12 17:44
黑黑真的厉害。这个歌词毫秒不差，我是老有不同步的
这个，franky的部分有点考验人，制作lrc时还是要非常专心才行 小辣椒 发表于 2022-6-12 17:43
吃饭前上来看看的，居然沙发坐上了
巴适得板 小辣椒 发表于 2022-6-12 18:05
黑黑你的地盘那个是新的歌词同步最后版本吧
6.11那个 马黑黑 发表于 2022-6-12 18:06
这个，franky的部分有点考验人，制作lrc时还是要非常专心才行
是的，我就感觉做这个歌词同步最大的困惑是做的时候看不见下面是歌词，我那编辑器制作一面看歌词一面掐音乐，我速度很快的，这个非得对歌曲熟息才可以 小辣椒 发表于 2022-6-12 18:08
是的，我就感觉做这个歌词同步最大的困惑是做的时候看不见下面是歌词，我那编辑器制作一面看歌词一面掐音 ...
下一句歌词会在小文本框里的 马黑黑 发表于 2022-6-12 18:06
巴适得板
今天白天没有睡觉玩，昨天也是睡的迟，昨天那个送岁月的播放器按钮不灵，查原因查到11点多 小辣椒 发表于 2022-6-12 18:10
今天白天没有睡觉玩，昨天也是睡的迟，昨天那个送岁月的播放器按钮不灵，查原因查到11点多
查到木有 马黑黑 发表于 2022-6-12 18:09
下一句歌词会在小文本框里的
这个我不熟的歌曲一掐音乐错误不能拉回去重新做，要全部重新来过 马黑黑 发表于 2022-6-12 18:10
查到木有
最后查到了，你知道我如果查不出原因我是不会睡觉的，昨天就和城管商量了许久{:4_170:} 小辣椒 发表于 2022-6-12 18:13
最后查到了，你知道我如果查不出原因我是不会睡觉的，昨天就和城管商量了许久
真有你的 小辣椒 发表于 2022-6-12 18:11
这个我不熟的歌曲一掐音乐错误不能拉回去重新做，要全部重新来过
lrc maker不用拉回去重做的吧 老黑好快的速度，又制作出来一个了。{:4_199:} 加林森 发表于 2022-6-12 18:50
老黑好快的速度，又制作出来一个了。
这歌特别，忍不住做一个 马黑黑 发表于 2022-6-12 19:00
这歌特别，忍不住做一个
好听。笫一次听呢。