远走高飞（学习黑黑的教程）TO：辫子哥哥
<style>.mama { left: -400px; width: 1400px; height:711px; top: 150px;background: #eee url('https://wj.zp68.com/lxx/yunhua/2022/06/07/1400X711.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left: 680px; top: 588px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
.stone { position: absolute;left: 700px;top: 300px; right: 50px; width: 50px; height: 50px; background-color: rgba(255,255,255,.35); background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65)); border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;box-shadow: inset 10px 10px 10px rgba(0,0,0,.05), 15px 25px 10px rgba(0,0,0,.1), 15px 20px 20px rgba(0,0,0,.05), inset -10px -10px 15px rgba(255,255,255,.9); }
#lrcDiv_outer { position: absolute; left: 730px; top: 550px; width: fit-content; height: fit-content;padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #2E63A5; border-radius: 6px; }
#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 class="stone"></div>
<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://wj.zp68.com/lxx/yunhua/2022/06/07/04.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<div style="position: absolute; left:280px; top: 880px; width:250px; ">
<img alt="" src="https://wj.zp68.com/lxx/yunhua/2022/06/07/002.gif"/></div>
<div style="position: absolute; left:820px; top: 1060px; width:75px; height: 28px; ">
<img alt="" src="https://wj.zp68.com/lxx/yunhua/2022/06/07/001.gif"/></div>
</div><br><br><br><br><br><br>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['00:03.00','远走高飞'],
['00:06.94','歌手：金志文 徐佳莹'],
['00:12.08','帖赠：辫子哥哥'],
['00:18.46','我一路看过千山和万水'],
['00:22.78','我的脚踏遍天南和地北'],
['00:27.09','日晒或是风吹'],
['00:29.72','我都无所谓'],
['00:31.92','路边那朵蔷薇'],
['00:34.17','鲜红的纯粹'],
['00:36.36','关掉了手机管他谁是谁'],
['00:40.55','不要去理会是是与非非'],
['00:45.11','天亮走到天黑 从不觉疲惫'],
['00:49.68','黄昏中的堡垒 多颓废'],
['00:53.13','如果迎着风就飞'],
['00:57.57','俯瞰这世界有多美'],
['01:02.07','让烦恼都灰飞'],
['01:04.58','别去理会自我藉慰'],
['01:10.77','如果还有梦就追'],
['01:15.54','至少不会遗憾后悔'],
['01:20.03','迎着光勇敢追 远走高飞'],
['01:24.41','说走就走一回'],
['01:27.60','LRC编辑：小辣椒'],
['01:34.66','翻过了山坡又踏过了水'],
['01:39.11','跟心走别管东南和西北'],
['01:43.55','前行还是后退'],
['01:45.98','靠直觉发挥'],
['01:48.17','落日下的余晖'],
['01:50.48','有一点凄美'],
['01:52.60','拥挤的城市布满了虚伪'],
['01:56.91','何必去辩解是错或是对'],
['02:01.09','就让一切回归 童真的滋味'],
['02:06.04','那自由的感觉 不会累'],
['02:09.79','如果迎着风就飞'],
['02:13.92','俯瞰这世界有多美'],
['02:18.36','让烦恼都灰飞'],
['02:20.73','别去理会自我藉慰'],
['02:27.47','如果还有梦就追'],
['02:32.22','至少不会遗憾后悔'],
['02:36.78','迎着光勇敢追 远走高飞'],
['02:40.72','说走就走一回'],
['02:45.42','辫子哥哥每天要多走路'],
['02:59.36','如果迎着风就飞'],
['03:03.56','俯瞰这世界有多美'],
['03:07.94','让烦恼都灰飞'],
['03:10.38','别去理会自我藉慰'],
['03:16.89','如果还有梦就追'],
['03:21.39','至少不会遗憾后悔'],
['03:25.92','迎着光勇敢追 远走高飞'],
['03:34.36','说走就走一回'],
['03:34.05','争取冲刺20000步'],
['03:47.63','谢谢大家欣赏']
];
let toSec = (lrcTime) => {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
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 = 'lightgreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'gold';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightgreen';
lrcUl.style.top = 0;
})
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br><br><br>
谢谢黑黑的教程@马黑黑 ，被昨天的编辑器弄的烦死，下载了几次都不行{:4_201:} 送给辫子哥哥，每天走路也是辛苦的，争取冲刺20000步，你是最棒的，加油！ 小辣椒 发表于 2022-6-7 19:21
谢谢黑黑的教程@马黑黑 ，被昨天的编辑器弄的烦死，下载了几次都不行
lrc歌词编辑器我弄了一个，正式版马上回出来 小辣椒改变了播放器的地址了，把大水滴变成了小水滴了，真漂亮！大赞！{:4_199:} 这菇凉不是小高吗？和辫子哥哥挺配的 马黑黑 发表于 2022-6-7 19:26
lrc歌词编辑器我弄了一个，正式版马上回出来
啊~~~谢谢黑黑，我现在吃饭去了，晚上上来看看 加林森 发表于 2022-6-7 19:27
小辣椒改变了播放器的地址了，把大水滴变成了小水滴了，真漂亮！大赞！
队长现在厉害了，真棒，我先吃饭去了，回见。 小辣椒 发表于 2022-6-7 19:28
队长现在厉害了，真棒，我先吃饭去了，回见。
好的。去吃吧。 小辣椒 发表于 2022-6-7 19:28
啊~~~谢谢黑黑，我现在吃饭去了，晚上上来看看
好的，等下我喝完酒就去完善一下 漂亮，这个毛玻璃在这个背景下特别漂亮。亲爱的真棒{:4_187:} 马黑黑 发表于 2022-6-7 19:26
lrc歌词编辑器我弄了一个，正式版马上回出来
太好了，黑黑辛苦了{:4_187:} 加林森 发表于 2022-6-7 19:31
好的。去吃吧。
队长，回来了，吃现成饭还嫌远{:4_173:} 小辣椒的图好清新亮眼，文字上的闪烁也很漂亮{:4_187:} 马黑黑 发表于 2022-6-7 19:31
好的，等下我喝完酒就去完善一下
黑黑，不急的，你的速度也是太快了{:4_173:} 醉美水芙蓉 发表于 2022-6-7 20:06
欣赏小辣椒播放器！
谢谢水芙蓉欣赏{:4_171:} 小辣椒 发表于 2022-6-7 21:11
队长，回来了，吃现成饭还嫌远
现在这么懒了啊？{:4_170:} 红影 发表于 2022-6-7 20:17
漂亮，这个毛玻璃在这个背景下特别漂亮。亲爱的真棒
亲爱的，我那个歌词编辑器突然提示不能用了，郁闷啊，昨天晚上捣鼓下载了好几个都不行，刚吃饭前朋友给我了一个，总算完成了 放歌词的小卷轴也是美美的{:4_187:}