《萤火虫》（学习歌词同步）
<style>
#hy{
left: -300px;
top:120px;
position: relative;
width: 1200px;
height: 675px;
background: black url('https://pic.imgdb.cn/item/620f54222ab3f51d91c63314.jpg') no-repeat center/cover; box-shadow: 0 0 0 3px #111;
opacity: 1;
}
#hy span {
position: absolute;
width: 40px;
height: 40px;
background: white url('http://image.hnol.net/c/2022-02/18/20/202202182042013221-5088534.gif');
border-radius: 50%;
opacity: 0.3;
transform: rotate(25deg);
animation: spla var(--k) infinite;
}
#hy span:nth-child(1){ left:100px; top:400px; --k: 9s;}
#hy span:nth-child(2){ left:260px; top:500px; --k: 3s; }
#hy span:nth-child(3){ left:160px; top:120px; --k: 2s; }
#hy span:nth-child(4){ left:380px; top:80px; --k: 3s; }
#hy span:nth-child(5){ left:600px; top:240px; --k: 4s; }
#hy span:nth-child(6){ left:1020px; top:106px; --k: 2s; }
#hy span:nth-child(7){ left:780px; top:369px; --k: 7s; }
#hy span:nth-child(8){ left:870px; top:400px; --k: 4s; }
#hy span:nth-child(9){ left:800px; top:120px; --k: 4.5s; }
#hy span:nth-child(10){ left:920px; top:300px; --k: 7.5s; }
@keyframes spla {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.7; transform:scale(1.2) rotate(-25deg); }
}
#gcDiv { width: 300px;position:relative; top: 350px; left: 490px; }
#paDiv { position: relative; top: 20px; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#lrcDiv { position: relative; top: 20px; color: #0E0E7B; font-size: 1.2em; text-shadow: 1px 1px 2px #000; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="hy">
<div id="gcDiv">
<!-- 播放器开始 -->
<div id="paDiv">
<div id="btn-ro">·</div><!-- 播放按钮 -->
<div id="jindu"><div id="jd-go"></div></div>
</div>
<!-- 播放器结束 -->
<div id="lrcDiv" style="padding:10px; width:300px;height:30px;">杨烁 - 萤火虫</div>
</div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script language="javascript">
var lrcAr=[
["00:00.23","杨烁 - 萤火虫"],
["00:09.34","制作：红影"],
["00:16.09","素材：来自网络"],
["00:25.15","萤火虫萤火虫慢慢飞"],
["00:31.09","夏夜里夏夜里风轻吹"],
["00:36.93","怕黑的孩子安心睡吧"],
["00:42.85","让萤火虫给你一点光"],
["00:48.46","燃烧小小的身影在夜晚"],
["00:54.15","为夜路的旅人照亮方向"],
["01:00.03","短暂的生命努力的发光"],
["01:06.18","让黑暗的世界充满希望"],
["01:15.15","萤火虫萤火虫慢慢飞"],
["01:20.90","我的心我的心还在追"],
["01:26.66","城市的灯光明灭闪耀"],
["01:32.63","还有谁会记得你燃烧光亮"],
["02:13.59","萤火虫萤火虫慢慢飞"],
["02:19.45","夏夜里夏夜里风轻吹"],
["02:25.24","怕黑的孩子安心睡吧"],
["02:31.09","让萤火虫给你一点光"],
["02:36.60","燃烧小小的身影在夜晚"],
["02:42.53","为夜路的旅人照亮方向"],
["02:48.30","短暂的生命努力的发光"],
["02:54.20","让黑暗的世界充满希望"],
["03:02.87","燃烧小小的身影在夜晚"],
["03:08.82","为夜路的旅人照亮方向"],
["03:14.66","短暂的生命努力的发光"],
["03:20.55","让黑暗的世界充满希望"],
["03:29.72","萤火虫萤火虫慢慢飞"],
["03:35.47","我的心我的心还在追"],
["03:41.34","城市的灯光明灭闪耀"],
["03:47.25","还有谁会记得你燃烧光亮"],
];
var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "http://www.kumeiwp.com/sub/filestores/2021/03/21/55d7056cddebf3e64c15fd7dfdf36809.mp3";
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
//处理lrc歌词数组：时间转换成秒
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步显示歌词
aud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr) lrcDiv.innerHTML = lrcAr;
}
}
</script>
<br><br><br><br><br><br><br><br> 把那个星星换成图片试试，开始换自己的头像，怪怪的，现在换了一个油灯，还是没弄好，像个球{:4_173:} 意思意思，主要想把黑黑教的争取做一下练习。谢谢黑黑的代码{:4_204:} 做个10个，排位置排得稀里糊涂。有一个不会动，不知道为什么，也看不出是代码里哪个偷懒了{:4_173:} 只有9个会动，对付着看吧{:4_170:} 亲爱的，你这个歌词是故意这样设置的？ 红影 发表于 2022-2-18 21:02
只有9个会动，对付着看吧
现在好了 小辣椒 发表于 2022-2-18 21:05
亲爱的，你这个歌词是故意这样设置的？
是啊，加个木板，让歌词看起来更清楚点{:4_173:} 小辣椒 发表于 2022-2-18 21:10
现在好了
还是有一个不会动啊，做上角那个。不过少一个问题不大{:4_189:} 红影 发表于 2022-2-18 21:12
还是有一个不会动啊，做上角那个。不过少一个问题不大
不是的，刚才看见你的歌词会抖动，现在好了 好漂亮的制作，这个是老歌曲了。红影在换花样玩啊。厉害厉害。{:4_187:}{:4_199:} 厉害呀，连音画都做好了。 小辣椒 发表于 2022-2-18 21:13
不是的，刚才看见你的歌词会抖动，现在好了
这个代码评分后都会这样，刷新后就好了。 加林森 发表于 2022-2-18 21:19
好漂亮的制作，这个是老歌曲了。红影在换花样玩啊。厉害厉害。
我在想能不能把黑黑教的融合到一起玩{:4_173:}
这个是那个小星星的代码，我换成图片了。本来可以让计算机做满天星，但怕跑到播放器上面影响歌词，只能手动做几个，便于移位。 樵歌 发表于 2022-2-18 21:22
厉害呀，连音画都做好了。
都是黑黑分享的代码啊，师兄要是愿意学，也可以做出来的{:4_187:} 红影 发表于 2022-2-18 21:12
还是有一个不会动啊，做上角那个。不过少一个问题不大
看不出，别人不知道的{:4_189:} 小辣椒 发表于 2022-2-18 21:37
看不出，别人不知道的
我做完自己去数的，怕有逃到图外的，结果发现有一个不会动{:4_189:} 红影 发表于 2022-2-18 21:39
我做完自己去数的，怕有逃到图外的，结果发现有一个不会动
看看歌词符号 小辣椒 发表于 2022-2-18 21:44
看看歌词符号
应该和歌词无关，这个是那个小星星的代码，我只是把星星换成了图片。
可能和定位有关，但是这几个我已经分不出哪个是哪个了，找不出来{:4_173:} 红影 发表于 2022-2-18 21:49
应该和歌词无关，这个是那个小星星的代码，我只是把星星换成了图片。
可能和定位有关，但是这几个我已经 ...
有时候就这样，我也是瞎捣鼓