《天边》 - 仁增太 （学习黑黑的歌词同步编辑）
本帖最后由 加林森 于 2022-6-10 14:45 编辑 <br /><br /><style>.mama { position: relative; left: -340px; width: 1280px; height: 650px; top: 150px; background: #333 url('https://pic.imgdb.cn/item/62a2be290947543129bb54f6.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>☆☆☆ 天边 ☆☆☆</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=1884027978.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 = [
['2.23','天边'],
['3.62','歌手：仁增太'],
['5.60','作词 : 无'],
['6.87','作曲 : 无'],
['10.29','天边有一对双星'],
['16.37','那是我梦中的眼睛'],
['25.38','心中有一片晨雾'],
['32.27','那是你昨夜的柔情'],
['40.90','我要登上 登上山顶'],
['52.70','去寻觅雾中的身影'],
['61.12','我要跨上 跨上骏马'],
['69.64','去追逐遥远的星星 星星'],
['85.10','我要跨上 跨上骏马'],
['104.30','去追逐遥远的星星 星星']
];
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>
@马黑黑 歌词面板在淡色背景下需要调整自己的底色，不能再用 transparent 马黑黑 发表于 2022-6-10 12:51
歌词面板在淡色背景下需要调整自己的底色，不能再用 transparent
好的，我去试一试。 加林森 发表于 2022-6-10 12:57
好的，我去试一试。
希望能找到该改哪里 马黑黑 发表于 2022-6-10 12:59
希望能找到该改哪里
嗯嗯。谢谢！ 句句情深，令人陶醉。 队长，好感动了，这么努力终于做出来了{:4_178:} 第一次尝试肯定比较难，今天的歌词还没有完全同步，但已经很成功了，加油！ 梦油 发表于 2022-6-10 13:56
句句情深，令人陶醉。
老梦下午好。{:4_190:} 小辣椒 发表于 2022-6-10 14:53
队长，好感动了，这么努力终于做出来了
是的是的。破老黑整这些一套一套的，把我脑壳都整晕了。{:4_170:} 小辣椒 发表于 2022-6-10 14:54
第一次尝试肯定比较难，今天的歌词还没有完全同步，但已经很成功了，加油！
下次制作一定小心了。谢谢小辣椒支持啊！{:4_204:} 加林森 发表于 2022-6-10 14:58
下次制作一定小心了。谢谢小辣椒支持啊！
队长客气了{:4_187:} 小辣椒 发表于 2022-6-10 15:08
队长客气了
好的，不客气了。 加林森 发表于 2022-6-10 14:56
老梦下午好。
我对“代码”一无所知，只能欣赏音乐和图片了。 梦油 发表于 2022-6-10 17:28
我对“代码”一无所知，只能欣赏音乐和图片了。
开心就好！ 加林森 发表于 2022-6-10 17:34
开心就好！
开心，开心。 恭喜队长做出来了，是不是用黑黑的lrc做歌词更方便了{:4_173:} 梦油 发表于 2022-6-10 20:15
开心，开心。
嗯嗯，是的。 红影 发表于 2022-6-10 20:34
恭喜队长做出来了，是不是用黑黑的lrc做歌词更方便了
这个与我原来的软件不一样了。老黑的是方便，就是有点烧脑。{:4_173:}
页:
[1]
2