《生日快乐吗》- 陈思键 TO： 小辣椒
本帖最后由 加林森 于 2022-6-6 10:42 编辑 <br /><br /><style>.mama { left: -202px; width: 1000px; height: 693px; background: #eee url('https://pic.imgdb.cn/item/629d69830947543129c0f0fc.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="http://www.kumeiwp.com/sub/filestores/2022/06/05/ae3f26b254918061c683d24ef5d84b4a.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['00:02.68','生日快乐吗？ - 陈思键'],
['00:04.94','词：陈思键'],
['00:05.90','曲：陈思键'],
['00:08.79','躺在月的余辉之中'],
['00:25.14','星辰含着我的各种失控'],
['00:37.87','有时不由得会忘了却了'],
['00:44.05','心脏它还想动'],
['00:50.98','像是一座没有钢筋的高楼'],
['00:55.13','不知为谁而强装着站立'],
['01:03.47','吃块蛋糕我们啥也都别说'],
['01:10.10','这里不存在词语'],
['01:16.85','拥抱的距离对此刻来说还太远了'],
['01:23.02','能不能想个方法住进我的身体呢'],
['01:29.34','重复着每个开机关机开机关机'],
['01:34.52','正弄坏每本诗集'],
['01:42.79','夜晚的黑色幽默还是黑得太浅了'],
['01:48.78','浅得没法让匆忙的时间染一声咳'],
['01:55.37','翻滚的每张床单枕头被窝烛火'],
['02:01.92','正催促我们失忆'],
['02:08.40','祝我生日快乐'],
['02:14.77','祝我生日快乐'],
['02:21.34','祝我生日快乐'],
['02:22.96','祝我生日快乐'],
['02:37.88','拥抱的距离对此刻来说还太远了'],
['03:06.61','能不能想个方法住进我的身体呢'],
['03:13.18','重复着每个开机关机开机关机'],
['03:18.54','正弄坏每本诗集'],
['03:26.32','夜晚的黑色幽默还是黑得太浅了'],
['03:32.57','浅得没法让匆忙的时间染一声咳'],
['03:39.09','翻滚的每张床单枕头被窝烛火'],
['03:45.64','正催促我们失忆'],
['03:55.33','祝我生日快乐'],
['04:01.78','祝我生日快乐'],
['04:08.34','祝我生日快乐'],
['04:14.70','祝我生日快乐'],
['04:21.79','加林森制作']
];
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>
本帖最后由 加林森 于 2022-6-6 12:26 编辑
@小辣椒 @马黑黑 今天小辣椒生日吗 马黑黑 发表于 2022-6-6 12:45
今天小辣椒生日吗
不是的，没有生日的 小辣椒 发表于 2022-6-6 12:55
不是的，没有生日的
额。那队长call你call我干嘛{:4_170:} 过生日就小孩子会快乐吧，我们这把年纪的人，过一次生日就老一岁的，不会快乐了{:4_173:} 队长又开始复习功课了，制作速度越来越快了{:4_178:} 谢谢队长的礼物，制作辛苦了{:4_187:} 马黑黑 发表于 2022-6-6 12:57
额。那队长call你call我干嘛
队长特别友好吧{:4_189:} 小辣椒 发表于 2022-6-6 13:00
队长特别友好吧
友好也不能乱安排生日的事情呀{:4_170:} 马黑黑 发表于 2022-6-6 13:03
友好也不能乱安排生日的事情呀
哈哈，队长就是热情{:4_170:} 马黑黑 发表于 2022-6-6 12:45
今天小辣椒生日吗
不是。 小辣椒 发表于 2022-6-6 12:58
队长又开始复习功课了，制作速度越来越快了
是啊。这首歌还不错的，就制作出来了送你玩的。 小辣椒 发表于 2022-6-6 12:59
谢谢队长的礼物，制作辛苦了
不客气的？ 加林森 发表于 2022-6-6 13:12
是啊。这首歌还不错的，就制作出来了送你玩的。
队长这个原图发我看看 小辣椒 发表于 2022-6-6 13:14
队长这个原图发我看看
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.sdnews.com.cn%2Fwenlv%2Flyjj%2F202107%2FW020210728485934394571.jpg&refer=http%3A%2F%2Fwww.sdnews.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?
小辣椒 发表于 2022-6-6 13:14
队长这个原图发我看看
发出来了 小辣椒 发表于 2022-6-6 12:59
谢谢队长的礼物，制作辛苦了
不辛苦的。 加林森 发表于 2022-6-6 13:32
发出来了
队长还是建议你搜索壁纸 加林森 发表于 2022-6-6 13:34
不辛苦的。
谢谢队长~~