许巍：第三极（祝小辣椒好心情）
本帖最后由 马黑黑 于 2022-6-5 21:58 编辑 <br /><br /><style>.mama { left: -202px; width: 1000px; height: 693px; background: #eee url('https://www.huachaowang.com/data/attachment/forum/202206/05/202425wmnz2v99n2m39eq1.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left:92px; bottom: 70px; transform: rotate(-90deg); cursor: pointer; }
#lrcDiv_outer { position: absolute; left: 20px; top: 220px; width: fit-content; height: fit-content;padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #2E63A5; border-radius: 6px; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>
<div class="mama">
<div id="lrcDiv_outer">
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=31010481.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['0:00','第三极'],
['0:05','词 : 王海涛'],
['0:36','曲/演唱 : 许巍'],
['0:40','lrc整理 : 老黑'],
['0:42','何必管一片海'],
['0:47','有多么澎湃'],
['0:53','何必管那山岗'],
['0:57','它高在什么地方'],
['1:03','只愿这颗跳动不停的心'],
['1:08','永远有慈爱'],
['1:14','好让这世间冰冷的胸膛'],
['1:18','如盛开的暖阳'],
['1:26','旅人等在那里'],
['1:32','虔诚仰望着云开'],
['1:37','咏唱回荡那里'],
['1:43','伴着寂寞的旅程'],
['1:50','心中这一只鹰'],
['1:55','在哪里翱翔'],
['2:01','心中这一朵花'],
['2:05','它开在那片草原'],
['2:10','伴音'],
['2:11','旅人等在那里'],
['3:03','虔诚仰望着云开'],
['3:08','咏唱回荡那里'],
['3:13','伴着寂寞的旅程'],
['3:19','我就停在这里'],
['3:24','跋山涉水后等待'],
['3:29','我永远在这里'],
['3:35','涌着爱面朝沧海'],
['3:46','-- End --']
];
let toSec = (lrcTime) => {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
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){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'lightseagreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'lightgreen';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightseagreen';
lrcUl.style.top = 0;
})
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
沙发我的 好样的，老黑真厉害！{:4_199:} 谢谢黑黑，真的神了{:4_173:}都晓得小辣椒心情不好{:4_179:} 许巍的唱词，为难俺，不少地方听不准 小辣椒 发表于 2022-6-5 20:33
谢谢黑黑，真的神了都晓得小辣椒心情不好
俺掐指一算……{:4_170:} 漂亮的歌词同步制作，黑黑你太厉害了{:4_178:} 小辣椒 发表于 2022-6-5 20:34
漂亮的歌词同步制作，黑黑你太厉害了
我按你的方法一句一句去记录时间{:4_170:} 马黑黑 发表于 2022-6-5 20:33
俺掐指一算……
昨天通夜没有睡着{:5_149:} 马黑黑 发表于 2022-6-5 20:34
我按你的方法一句一句去记录时间
哎。。。。。。。我郁闷S了 马黑黑 发表于 2022-6-5 20:33
俺掐指一算……
你乱七八糟的的啊。。。。{:4_189:} 小辣椒 发表于 2022-6-5 20:38
昨天通夜没有睡着
本身，甲状问题容易失眠，慢慢修复就好 加林森 发表于 2022-6-5 20:31
好样的，老黑真厉害！
队长现在也是厉害了。速度这么快就出来了{:4_187:} 加林森 发表于 2022-6-5 20:38
你乱七八糟的的啊。。。。
俺会数手指的 小辣椒 发表于 2022-6-5 20:38
哎。。。。。。。我郁闷S了
慢慢调整 小辣椒 发表于 2022-6-5 20:33
谢谢黑黑，真的神了都晓得小辣椒心情不好
小辣椒开心啊{:4_179:} 马黑黑 发表于 2022-6-5 20:38
本身，甲状问题容易失眠，慢慢修复就好
痛苦S了{:4_198:} 马黑黑 发表于 2022-6-5 20:39
俺会数手指的
你如来佛？ 加林森 发表于 2022-6-5 20:41
你如来佛？
我不姓如 小辣椒 发表于 2022-6-5 20:39
队长现在也是厉害了。速度这么快就出来了
没有什么的，你开心就好！