《青青园中葵》- 李知遥 TO：小辣椒的丫头
<style>
/* 界面及音乐控制 */
.mama { left: -202px; width: 1000px; height: 664px; background: #eee url('https://pic.imgdb.cn/item/629c7c2a0947543129d951e2.jpg') no-repeat; position: relative; }
.meter { position: absolute; left: 50%; bottom: 213px; transform: rotate(-90deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv { position: absolute; right: 0; bottom: 160px; width: 340px; height: 108px; overflow: hidden; background: transparent linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.45)); }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 24px; padding: 6px 0; font: normal 20px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>
<div class="mama">
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://www.joy127.com/url/81940.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//元素句柄
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[
['0:02','歌名 : 愿'],
['00:01.55','青青园中葵 - 李知遥'],
['00:03.30','词：魏岚'],
['00:05.48','曲：龙伟华'],
['00:08.98','朵朵向日葵'],
['00:26.24','熠熠生光辉'],
['00:30.26','它有一颗向阳心'],
['00:35.70','灿灿烂烂好妩媚'],
['00:39.60','我要和它排成队'],
['00:44.20','做那沉静的园中葵'],
['00:48.21','青青园中葵'],
['00:53.04','默默开向谁'],
['00:58.43','你看那奔驰的太阳'],
['01:03.34','让它多心醉'],
['01:07.89','青青园中葵'],
['01:12.71','默默开向谁'],
['01:18.64','醉啊醉红了朝霞'],
['01:22.40','一起把那阳光追随'],
['01:45.82','朵朵向日葵'],
['01:50.42','欣欣开无悔'],
['01:55.05','它有一颗向阳心'],
['01:59.59','蓬蓬勃勃好明媚'],
['02:04.43','我要和它排成队'],
['02:08.58','做那起舞的园中葵'],
['02:13.55','青青园中葵'],
['02:18.28','烈烈开向谁'],
['02:22.98','你看那飞驰的太阳'],
['02:27.54','让它多陶醉'],
['02:32.30','青青园中葵'],
['02:37.03','烈烈开向谁'],
['02:41.93','醉啊醉湿了雨露'],
['02:46.28','一起等那阳光包围'],
['02:50.90','醉啊醉湿了雨露'],
['02:55.55','一起等那阳光包围'],
['03:05.09','谢谢欣赏']
];
//lrc时间信息转为秒
let toSec = (lrcTime) => {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
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 = 'lightseagreen';
lrcUl.style.top ='-' + (j * 36 - 36) + 'px'; //乘减依据: li高度
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'lightgreen';
}
}
})
// 播放结束重置歌词样式
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightseagreen';
lrcUl.style.top = 0;
})
//音乐控制
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@小辣椒 代小妞谢谢队长的精美礼物{:4_187:} 漂亮的歌词同步，是黑黑那个教程我先去看看 小辣椒 发表于 2022-6-5 20:26
代小妞谢谢队长的精美礼物
开心就好啊。这个是新的，是老黑才发出来的，我就直接制作了出来送你丫头的。 小辣椒 发表于 2022-6-5 20:27
漂亮的歌词同步，是黑黑那个教程我先去看看
嗯嗯 加林森 发表于 2022-6-5 20:29
开心就好啊。这个是新的，是老黑才发出来的，我就直接制作了出来送你丫头的。
看见了，队长速度快的，队长也是要注意身体，不要经常电脑前。。。。{:4_179:} 真漂亮，队长真快。做歌词同步不容易的，给队长点赞{:4_187:} 小辣椒 发表于 2022-6-5 20:41
看见了，队长速度快的，队长也是要注意身体，不要经常电脑前。。。。
嗯嗯，给丫头空间吧。她会好的。{:5_161:} 红影 发表于 2022-6-5 20:43
真漂亮，队长真快。做歌词同步不容易的，给队长点赞
谢谢红影支持!看见老黑发出来的代码就制作出来了。 加林森 发表于 2022-6-5 20:29
开心就好啊。这个是新的，是老黑才发出来的，我就直接制作了出来送你丫头的。
队长的速度现在真的佩服了{:4_187:} 小辣椒 发表于 2022-6-5 21:14
队长的速度现在真的佩服了
不客气的。只要开心就好啊。 醉美水芙蓉 发表于 2022-6-5 21:03
队长厉害！好漂亮！
水芙蓉晚上好。谢谢你！ 队长好快啊，制作漂亮了 绿叶清舟 发表于 2022-6-5 21:45
队长好快啊，制作漂亮了
谢谢清舟支持啊！{:4_204:} 队长做的好漂亮。童声很可耐。 加林森 发表于 2022-6-5 21:53
谢谢清舟支持啊！
队长客气了啊 绿叶清舟 发表于 2022-6-5 21:57
队长客气了啊
晚上好。喝水：{:4_176:} 马黑黑 发表于 2022-6-5 21:56
队长做的好漂亮。童声很可耐。
谢谢老黑点评啊。{:4_191:}
页:
[1]
2