愿——问好大猫咪

马黑黑 · 发表于 2022-6-5 16:16

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-6-5 16:29 编辑

马黑黑 · 发表于 2022-6-5 16:26

<style>
/* 界面及音乐控制 */
.mama { left: -202px; width: 1000px; height: 664px; background: #eee url('https://638183.freep.cn/638183/Pic/2022/9.jpg') no-repeat; position: relative; }
.meter { position: absolute; left: 50%; bottom: 215px; 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://music.163.com/song/media/outer/url?id=30569502.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','歌名 : 愿'],
['0: 05','歌手 : 崔子格'],
['0:28','所属专辑 : 热门华语260'],
['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','--End--']
];
//lrc时间信息转为秒
let toSec = (lrcTime) => {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
return lrcTime;
}
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr[j][0] = toSec(lrcAr[j][0]);
lrcUl.innerHTML += '<li id="li' + lrcAr[j][0] + '">' + lrcAr[j][1] + '</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[j][0]){
if(j > 0){
let idxLast = lrcAr[j-1][0];
document.getElementById('li' + idxLast).style.color = 'lightseagreen';
lrcUl.style.top ='-' + (j * 36 - 36) + 'px'; //乘减依据: li高度
}
let idx = lrcAr[j][0];
document.getElementById('li' + idx).style.color = 'lightgreen';
}
}
})
// 播放结束重置歌词样式
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = 'lightseagreen';
lrcUl.style.top = 0;
})
//音乐控制
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

复制代码

马黑黑 · 发表于 2022-6-5 16:28

歌词板想做个毛玻璃效果，好像效果出来了。

要留意单句歌词的长度，适当调整板的宽度，#lrcDiv 选择器那里

马黑黑 · 发表于 2022-6-5 16:44

71行，JS这句，

lrcUl.style.top ='-' + (j * 36 - 36) + 'px'; //乘减依据: li高度

36是如何计算出来的：

09行，#lrcUl li { height: 24px; padding: 6px 0;

24 + 6* 2 = 36

这是 li 标签的高度，实际高度 + 上、下内边距，所以得出 36