放个假
就是就是。
<style>
/* 界面及音乐控制 */
.mama { left: -202px; width: 1000px; height: 664px; background: #eee url('https://pic.imgdb.cn/item/629df3cf0947543129732dc9.jpg') no-repeat; position: relative; }
.meter { position: absolute; left: 50%; bottom: 215px; transform: rotate(-90deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv_outer { position: absolute; width: fit-content; height: fit-content;padding: 10px 14px; right: 10px; bottom: 160px; background: transparent linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.45)); }
#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 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="https://music.163.com/song/media/outer/url?id=65538.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//元素句柄
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[
['0:01','歌名 :好久不见'],
['0: 05','歌手 : 陈奕迅'],
['0:28','所属专辑 : 认了吧'],
['0: 31','我来到 你的城市'],
['0:37','走过你来时的路'],
['0:42','想象着 没我的日子'],
['0: 47','你是怎样的孤独。'],
['0:53','拿着你 给的照片'],
['0:58','熟悉的那一条街'],
['1:04','只是没了你的画面'],
['1:09','我们回不到那天'],
['1:15','你会不会忽然地出现'],
['1:21','在街角的咖啡店'],
['1:27','我会带着笑脸 挥手寒暄'],
['1:35','和你 坐着聊聊天'],
['1:42','我多么想和你见一面'],
['1:49','看看你最近改变'],
['2:10','不再去说从前 只是寒暄'],
['2:17','对你说一句'],
['2:24','只是说一句'],
['2:31','好久不见'],
['2:38','拿着你 给的照片'],
['2:45','熟悉的那一条街'],
['3:00','只是没了你的画面'],
['3:01',。。。。。。']
];
//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 * 24 - 24) + '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> 加林森 发表于 2022-5-1 11:26
就是就是。
开森就好 马黑黑 发表于 2022-5-1 11:29
开森就好
是啊。老黑不出去玩吗？ 加林森 发表于 2022-5-1 11:31
是啊。老黑不出去玩吗？
疫情之下最好别到处乱跑 马黑黑 发表于 2022-5-1 13:09
疫情之下最好别到处乱跑
我们这里比较好。 加林森 发表于 2022-5-1 17:57
我们这里比较好。
不能大意 马黑黑 发表于 2022-5-1 19:47
不能大意
嗯嗯，谢谢！
页:
1
[2]