愿——问好大猫咪

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

本帖最后由马黑黑于 2022-6-5 16:29 编辑 <br /><br /><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: 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://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 * 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>

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

马黑黑 发表于 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

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

设置 li 的 padding 是为了让歌词行与行间好看一点，但在论坛里貌似不好控制 li 的属性，不在乎的话可以不设置 li 的padding值，这样的话，li 的高度就是 lrcUl.style.top 的计算依据

加林森 发表于 2022-6-5 16:47

制作漂亮。大赞！{:4_199:}

梦油发表于 2022-6-5 16:59

黑黑朋友遴选的这幅图片真是太美了，再这样风景如画的环境休养多好啊。

马黑黑 发表于 2022-6-5 18:06

梦油发表于 2022-6-5 16:59
黑黑朋友遴选的这幅图片真是太美了，再这样风景如画的环境休养多好啊。

这个地方是我小时候经常玩耍的地方，不过那时候水要比现在的旺。现在开发了，没有以前的自然了。

马黑黑 发表于 2022-6-5 18:06

加林森发表于 2022-6-5 16:47
制作漂亮。大赞！

@大猫咪好久不见来玩了

梦油发表于 2022-6-5 18:23

马黑黑发表于 2022-6-5 18:06
这个地方是我小时候经常玩耍的地方，不过那时候水要比现在的旺。现在开发了，没有以前的自然了。

嗬！你太有福气了。你一定会游泳吧。

加林森 发表于 2022-6-5 18:40

马黑黑发表于 2022-6-5 18:06
@大猫咪好久不见来玩了

大猫咪的爷爷去世了，他在帮着家里处理事情，很快就会回来的。
我也跟着制作了一个，是送小辣椒丫头的。你帮着看看。

马黑黑 发表于 2022-6-5 19:02

加林森发表于 2022-6-5 18:40
大猫咪的爷爷去世了，他在帮着家里处理事情，很快就会回来的。
我也跟着制作了一个，是送小辣椒丫头的。 ...

感谢告知

马黑黑 发表于 2022-6-5 19:03

梦油发表于 2022-6-5 18:23
嗬！你太有福气了。你一定会游泳吧。

会的，而且还是火星游泳冠军

加林森 发表于 2022-6-5 19:18

马黑黑发表于 2022-6-5 19:02
感谢告知

不客气的。

马黑黑 发表于 2022-6-5 19:52

加林森发表于 2022-6-5 19:18
不客气的。

{:4_190:}

加林森 发表于 2022-6-5 19:55

马黑黑发表于 2022-6-5 19:52

{:4_191:}

红影发表于 2022-6-5 19:57

好漂亮的风景。歌词带个毛玻璃板的半透明效果也很棒的，黑黑的创意无穷{:4_199:}

红影发表于 2022-6-5 20:15

马黑黑发表于 2022-6-5 18:06
@大猫咪好久不见来玩了

猫猫家里遇到点事，暂时应该不会来。

马黑黑 发表于 2022-6-5 20:21

红影发表于 2022-6-5 20:15
猫猫家里遇到点事，暂时应该不会来。

知道了。谢谢告知。

马黑黑 发表于 2022-6-5 20:22

红影发表于 2022-6-5 19:57
好漂亮的风景。歌词带个毛玻璃板的半透明效果也很棒的，黑黑的创意无穷

毛玻璃在清晰的背景下很漂亮的

页: [1] 2 3

花潮论坛's Archiver

愿——问好大猫咪