阵雨天
<style>.mama { position: relative; left: -374px; width: 1344px; height: 756px; background: #333 url('/data/attachment/forum/202206/09/120044oam2ucwywj4cmumw.jpg') no-repeat; box-shadow: 2px 2px 4px #333; }
.lrcWrap { left: 20px; top: 20px; 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://music.163.com/song/media/outer/url?id=1954053267.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 = [
['0.26','作词 : 毕萝'],
['2.07','作曲 : 灰色幽默'],
['4.52','制作人：仲夏夜/陶云霏'],
['6.22','出品：网易喜雨+JBS Music'],
['17.97','为什么夏天逃不过 分手的季节'],
['22.13','明明我们曾有过 共同的话题'],
['26.08','你不知道的秘密 可一件件说给你'],
['30.09','时间的步履太急 来不及惋惜'],
['34.42','用过去埋葬过去'],
['38.14','用回忆治愈回忆'],
['41.39','我认真的样子 如此滑稽'],
['45.28','反正你知道了 也毫不在意'],
['48.83','你是六月 无风也会过境的 阵雨天'],
['53.92','连绵不绝 下了一整个季节'],
['57.34','时而出现 时而告别'],
['61.46','我抓不住你 像抓不住雨点'],
['65.69','你是六月 无风也会过境的 阵雨天'],
['69.90','点点圈圈 落在了我的心间'],
['73.29','你的爱来时 那样强烈'],
['77.80','却短暂得我 无法幸免'],
['98.37','用过去埋葬过去'],
['102.26','用回忆治愈回忆'],
['105.45','我认真的样子 如此滑稽'],
['109.62','反正你知道了 也毫不在意'],
['112.86','你是六月 无风也会过境的 阵雨天'],
['117.83','连绵不绝 下了一整个季节'],
['121.30','时而出现 时而告别'],
['125.22','我抓不住你 像抓不住雨点'],
['129.56','你是六月 无风也会过境的 阵雨天'],
['133.76','点点圈圈 落在了我的心间'],
['137.41','你的爱来时 那样强烈'],
['142.15','却短暂得我 无法幸免'],
['146.68','雨下了 这一夜 又一夜'],
['150.20','故事却 怎么也 无法翻篇'],
['153.08','如果说 当时我没能和你遇见'],
['157.21','也不必 还在乎会被你疏远'],
['161.17','你是六月 无风也会过境的 阵雨天'],
['165.85','连绵不绝 下了一整个季节'],
['169.24','时而出现 时而告别'],
['173.12','我抓不住你 像抓不住雨点'],
['177.15','你是六月 无风也会过境的 阵雨天'],
['181.94','点点圈圈 落在了我的心间'],
['185.30','你的爱来时 那样强烈'],
['189.85','却短暂得我 无法幸免'],
['199.05','感谢欣赏'],
];
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>
黑黑又出新效果，歌名可以固定在最前面。这个好{:4_187:} 红影 发表于 2022-6-9 12:56
黑黑又出新效果，歌名可以固定在最前面。这个好
这都看得出来了 马黑黑 发表于 2022-6-9 13:00
这都看得出来了
又有新的玩的了，这个好{:4_173:} 马黑黑 发表于 2022-6-9 13:00
这都看得出来了
毛玻璃在这个背景下特别漂亮{:4_199:} 我不懂代码……只是在欣赏音乐。 老黑的这个制作真漂亮。大赞！{:4_199:} 黑黑特别的高效{:4_178:} 小辣椒 发表于 2022-6-9 17:59
黑黑特别的高效
哪里哪里？有空做做
加林森 发表于 2022-6-9 16:41
老黑的这个制作真漂亮。大赞！
感谢支持 红影 发表于 2022-6-9 13:03
毛玻璃在这个背景下特别漂亮
还行的吧 马黑黑 发表于 2022-6-9 17:59
哪里哪里？有空做做
最近这几天都是吃吃喝喝。。。。。谢朋友们{:4_173:} 红影 发表于 2022-6-9 13:02
又有新的玩的了，这个好
这是在原来的基础上略作改变而已 小辣椒 发表于 2022-6-9 18:01
最近这几天都是吃吃喝喝。。。。。谢朋友们
挺好，我也吃喝去了 昨天我做的歌词同步加自己里面没有出来，晚上套黑黑这个里面试试 小辣椒 发表于 2022-6-9 18:02
昨天我做的歌词同步加自己里面没有出来，晚上套黑黑这个里面试试
不能有任何错误 马黑黑 发表于 2022-6-9 18:02
挺好，我也吃喝去了
晚上见 马黑黑 发表于 2022-6-9 18:02
不能有任何错误
估计我哪里错了 马黑黑 发表于 2022-6-9 17:59
感谢支持
应该的应该的 加林森 发表于 2022-6-9 18:23
应该的应该的
{:5_108:}