加林森 发表于 2022-5-16 13:51
我从小就喜欢音乐的。
这大概就是天赋吧。
本帖最后由 加林森 于 2022-6-10 21:31 编辑 <br /><br />梦油 发表于 2022-5-16 14:10
这大概就是天赋吧。
嗯嗯，是的。美术也是从小就喜欢的。
<style>
.mama { position: relative; left: -340px; width: 1280px; height: 650px; top: 150px; background: #333 url('https://pic.imgdb.cn/item/62a2fd940947543129129f7b.jpg') no-repeat; box-shadow: 2px 2px 4px #333; }
.lrcWrap { left: 580px; top: 250px; 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 #eaff56; cursor: pointer; position: absolute; }
.lrcWrap p { margin: 0; padding: 10px; color: #ccc; font: bold 1.2em sans-serif; text-shadow: 1px 1px 1px #eaff56; }
.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>☆☆☆ 心太软(Live)☆☆☆</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=144396.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.52','心太软(Live) - 任贤齐/小虫'],
['1.42','作词 : 小虫'],
['2.52','作曲 : 小虫'],
['3.29','编曲 : 弋洋'],
['4.12','制作人 : 荒井十一'],
['8.53','你总是心太软 心太软'],
['31.48','独自一个人流泪到天亮'],
['36.12','你总是心太软 心太软'],
['40.61','把所有问题都自己扛'],
['43.77','夜深了你还不想睡'],
['49.93','你还在想着他吗'],
['60.36','你这样痴情到底累不累'],
['64.65','明知他不会回来安慰'],
['86.02','只不过想好好爱一个人'],
['90.07','可惜他无法给你满分'],
['94.92','多余的牺牲 他不懂心疼'],
['100.28','你应该不会只想做个好人'],
['105.81','喔 算了吧'],
['108.07','就这样忘了吧 该放就放'],
['109.55','再想也没有用'],
['113.90','傻傻等待 他也不会回来'],
['117.72','你总该为自己想想未来'],
['123.02','你总是心太软 心太软'],
['129.82','独自一个人流泪到天亮'],
['132.61','你无怨无悔的爱着那个人'],
['138.18','我知道你根本没那么坚强'],
['142.17','你总是心太软 心太软'],
['149.50','把所有问题都自己扛'],
['151.35','相爱总是简单 相处太难'],
['155.99','不是你的就别再勉强'],
['160.41','感谢老黑的教程！'],
['198.51','喔 算了吧'],
['202.01','就这样忘了吧 该放就放'],
['204.63','再想也没有用'],
['210.89','傻傻等待 他也不会回来'],
['213.40','你总该为自己想想未来'],
['216.60','你总是心太软 心太软'],
['222.53','独自一个人流泪到天亮'],
['228.61','你无怨无悔的爱着那个人'],
['233.52','我知道你根本没那么坚强'],
['237.92','你总是心太软 心太软'],
['274.52','把所有问题都自己扛'],
['276.59','相爱总是简单 相处太难'],
['282.00','不是你的就别再勉强'],
['286.97','不是你的就别再勉强'],
['291.59','不是你的就别再勉强'],
['296.29','不是你的就别再勉强'],
['312.65','你总是心太软 心太软']
]；
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>
<br><br><br><br><br><br><br><br>
加林森 发表于 2022-5-16 14:12
嗯嗯，是的。美术也是从小就喜欢的。
朋友真是多才多艺啊！
梦油 发表于 2022-5-16 14:26
朋友真是多才多艺啊！
小时候没有玩的，就玩这些了。
加林森 发表于 2022-5-16 14:37
小时候没有玩的，就玩这些了。
看来，你的艺术功底还很扎实啊
一般一般，只是爱好而已。