《知道不知道》- 侃侃
本帖最后由 加林森 于 2022-7-17 11:18 编辑 <br /><br /><style>.mama { left: -302px; width: 1200px; height: 522px; background: #eee url('https://pic.imgdb.cn/item/629f1e3c0947543129b70c5b.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left: -30px; top: 58px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
.stone { position: absolute; top: 100px; right: 50px; width: 150px; height: 150px; background-color: rgba(255,255,255,.35); background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65)); border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;box-shadow: inset 10px 10px 10px rgba(0,0,0,.05), 15px 25px 10px rgba(0,0,0,.1), 15px 20px 20px rgba(0,0,0,.05), inset -10px -10px 15px rgba(255,255,255,.9); }
#lrcDiv_outer { position: absolute; left: 40px; top: 40px; 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 class="stone"></div>
<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/07/463abfe0d35d1a3d859252a55abfc701.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['00:02.34','知道不知道 - 侃侃'],
['00:03.54','那天的云是否都已料到'],
['00:07.20','所以脚步才轻'],
['00:13.42','以免打扰到 我们的时光'],
['00:19.35','因为注定那么少'],
['00:25.54','风 吹着 白云飘'],
['00:31.11','你到哪里去了'],
['00:37.15','想你的时候 我抬头微笑'],
['00:43.05','你知道不知道'],
['00:54.03','那天的云是否都已料到'],
['01:30.22','所以脚步才轻巧'],
['01:35.98','以免打扰到 我们的时光'],
['01:42.15','因为注定那么少'],
['01:49.05','风 吹着 白云飘'],
['01:54.36','你到哪里去了'],
['02:00.07','想你的时候 我抬头微笑'],
['02:06.14','你知道不知道'],
['02:25.53','那天的云是否都已料到'],
['02:27.71','所以脚步才轻巧'],
['02:30.24','以免打扰到 我们的时光'],
['02:33.85','因为注定那么少'],
['02:37.54','风 吹着 白云飘'],
['02:43.08','你到哪里去了'],
['02:46.50','想你的时候 我抬头微笑'],
['02:51.66','你知道不知道'],
['02:57.62','想你的时候 我抬头微笑'],
['03:02.53','你知道不知道'],
['03:33.15','LRC编制：加林森']
];
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 = 'lightgreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'gold';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightgreen';
lrcUl.style.top = 0;
})
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@马黑黑 看得出是用心制作的作品 马黑黑 发表于 2022-6-7 18:15
看得出是用心制作的作品
是啊，折腾了一下午了。{:4_189:} 队长真的很用功{:4_178:} 队长是套用黑黑的吗？ 小辣椒 发表于 2022-6-7 19:11
队长真的很用功
小辣椒晚上好！{:4_204:} 小辣椒 发表于 2022-6-7 19:12
队长是套用黑黑的吗？
是的，但是我调整了一些数字的，就变成这样了。 这棵树的倒影很好看哦！ 很漂亮的制作，队长真棒{:4_187:} 漂亮的啊，才知道侃侃唱过这首歌的 梦油 发表于 2022-6-7 20:13
这棵树的倒影很好看哦！
是的，是倒影的。 红影 发表于 2022-6-7 20:14
很漂亮的制作，队长真棒
谢谢红影支持！{:4_204:} 绿叶清舟 发表于 2022-6-7 20:27
漂亮的啊，才知道侃侃唱过这首歌的
是啊，我在找歌曲时发现的就制作出来了。 队长出品必属精品{:4_204:} 闲言不语 发表于 2022-6-7 21:08
队长出品必属精品
没有的事，我是跟到学习的。 加林森 发表于 2022-6-7 19:17
是的，但是我调整了一些数字的，就变成这样了。
这个还是不要调整的，黑黑就是要按钮在毛玻璃旁边，那个是一种效果 小辣椒 发表于 2022-6-7 22:15
这个还是不要调整的，黑黑就是要按钮在毛玻璃旁边，那个是一种效果
哦。 加林森 发表于 2022-6-7 21:03
是的，是倒影的。
你这个倒影做的很精彩 梦油 发表于 2022-6-8 10:58
你这个倒影做的很精彩
这样有立体感，对不对！
页:
[1]
2