漫步宇宙
<style>.mama { left: -70px; width: 900px; height: 640px; background-color: lightseagreen; background-image: linear-gradient(to top right,rgba(0, 50, 10, .45) 50%,transparent 0), linear-gradient(to bottom right, transparent 50%, rgba(0, 50, 10, .45) 0); background-size: 50% 100%; position: relative; animation: bgGo 20s linear infinite alternate; }
.small { position: absolute; left: 20px; top: 20px; width: 200px; height: 200px; border-radius: 50%;background-color: teal; cursor: pointer; box-reflect: right; -webkit-box-reflect: right 460px; opacity: .6; }
.small::before, .small::after { position: absolute; width: 100%; height: 100%; border-radius: 50%; font: bold 2em / 200px sans-serif; text-align: center; color: #eee;background: transparent linear-gradient(45deg, transparent, lightblue); }
.small::before { content: '漫步'; top: 200px; }
.small::after { content: '宇宙'; top: 400px; }
#lrcDiv_outer { position: absolute; right: 20px; top: 20px; 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 #eee; border-radius: 6px; cursor: pointer; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; user-select: none;}
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: #ccc; text-shadow: 1px 1px 1px black; list-style-type: none; }
.meter { position: absolute; top: 40px; width: 100px; transform: translate(-60px, -2px) rotate(-90deg); cursor: pointer; }
@keyframes bgGo { to { background-size: 20% 100%; } }
</style>
<div class="mama">
<div class="mama small"></div>
<div id="lrcDiv_outer">
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1851330469.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl'),
small = document.querySelector('.small');
let slip = 0;
let lrcAr = [
['0.01','漫步宇宙'],
['0.50','歌手 : 蓝心羽'],
['3.40','作词 : 周公'],
['3.36','作曲 : 周公'],
['4.77','编曲 : 周富坚'],
['6.26','制作人 : 周富坚&田跃君'],
['7:00','Wu'],
['30.10','装作不在意的看你经过'],
['32.70','疯狂思考着搭讪的借口'],
['34.85','开始苦恼自己不够优秀'],
['36.93','看不出 让你心动的理由'],
['39.46','反正没结果 不如放手一搏'],
['42.00','大不了难过 至少你还能看看我'],
['44.28','Hello 你好听我说 我想约你吃火锅'],
['48.85','Wu 就跟我一起走'],
['53.80','Wu 牵着你漫步宇宙'],
['58.77','Wu 时间它带不走'],
['63.22','Wu 我们的故事没有尽头'],
['90.05','拿起手机 开始分析'],
['92.60','话不投机 大有问题'],
['94.90','不能放弃 稍作休息'],
['97.23','拉近距离 真情偷袭'],
['99.66','聊天我真的不拿手'],
['102.05','花言巧语不会说'],
['104.14','希望你能发现我的好'],
['106.52','尽管我的爱不是最早'],
['109.08','可能我太过 知道你很疑惑'],
['111.54','爱就要紧握 别在意别人怎么说'],
['113.40','追你的人很多很多'],
['115.63','但你只需要听我说'],
['118.80','Wu 就跟我一起走'],
['123.30','Wu 牵着你漫步宇宙'],
['128.79','Wu 时间它带不走'],
['132.53','Wu 我们的故事没有尽头'],
['158.40','Wu'],
['177.20','Wu 就跟我一起走'],
['182.24','Wu 牵着你漫步宇宙'],
['187.23','Wu 时间它带不走'],
['191.38','Wu 我们的故事没有尽头'],
['196.77','Wu 嘿想约你吃火锅跟我一起走'],
['200.99','Wu 想牵着你一起漫步宇宙'],
['206.09','Wu 时间它带不走'],
['211.20','Wu'],
['214.47','lrc整理 : lrcmaker']
];
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;
small.style.backgroundColor = '#' + setColor();
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 = '#ccc';
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 = '#ccc';
lrcUl.style.top = 0;
})
small.onclick = lrcUl.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
let setColor = () => Math.random().toString(16).substr(-6);
</script>
漂亮的制作。老黑漫步在山间还是宇宙呢？{:4_203:}{:4_199:} 加林森 发表于 2022-6-8 20:45
漂亮的制作。老黑漫步在山间还是宇宙呢？
差不多差不多 本帖最后由 马黑黑 于 2022-6-8 20:58 编辑
这节奏像跑步一样，做lrc歌词挺考验人的{:4_170:} 马黑黑 发表于 2022-6-8 20:53
差不多差不多
{:4_172:} 马黑黑 发表于 2022-6-8 20:55
这节奏像跑步一样，做lrc歌词听考验人的
就是，手一慢就真的在漫步了。{:4_189:} 加林森 发表于 2022-6-8 20:57
就是，手一慢就真的在漫步了。
我一气呵成，就是中间漏了一句，手动估摸着补上 马黑黑 发表于 2022-6-8 20:58
我一气呵成，就是中间漏了一句，手动估摸着补上
嗯嗯，很正常的。这个得专心才行。 加林森 发表于 2022-6-8 21:00
嗯嗯，很正常的。这个得专心才行。
是的吧 醉美水芙蓉 发表于 2022-6-8 21:22
欣赏黑黑老师新作品！
晚上好{:4_190:} 马黑黑 发表于 2022-6-8 21:17
是的吧
是的。 马黑黑 发表于 2022-6-8 20:58
我一气呵成，就是中间漏了一句，手动估摸着补上
漏一句发现了可以当场拉回进度条，找回来。或者全部做完，这句重听，把时间复制过去就完了啊{:4_173:} 这个真漂亮，又是纯代码的背景。还有镜射。这移动效果像弹簧{:4_187:} 这首个的歌词很好玩。时间还挺准确的，黑黑厉害{:4_187:} 红影 发表于 2022-6-8 21:50
这首个的歌词很好玩。时间还挺准确的，黑黑厉害
这是测试 lrcmaker 的误差处理机制专选的歌曲 红影 发表于 2022-6-8 21:44
漏一句发现了可以当场拉回进度条，找回来。或者全部做完，这句重听，把时间复制过去就完了啊
方法还挺多
加林森 发表于 2022-6-8 21:31
是的。
嗯，挺好挺好 红影 发表于 2022-6-8 21:45
这个真漂亮，又是纯代码的背景。还有镜射。这移动效果像弹簧
这给完全是自己动手做了，不参考任何成品 马黑黑 发表于 2022-6-8 22:01
嗯，挺好挺好
{:4_199:}