最远的你是我最近的爱
本帖最后由 醉美水芙蓉 于 2022-6-7 22:22 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0">
<style>
.mama { left: -210px; width: 1024px; height:640px; top: 150px;background: #eee url('https://s1.ax1x.com/2022/06/07/XDc7y8.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left: 600px; top: 568px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
.stone { position: absolute;left: 150px;top: 50px; 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: 650px; top: 530px; 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://www.qqmc.com/up/kwlink.php?id=215117059&.mp3" autoplay="autoplay" loop="loop"></audio>
<div style="position: absolute; left:820px; top: 1060px; width:75px; height: 28px; ">
<img alt="" src=" "/></div>
</div><br><br><br><br><br><br>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['0.01','最远的你是我最近的爱 (DJ默涵版) - 半吨兄弟 '],
['00:00.21',' 词：沈陵'],
['00:00.25','曲：史俊鹏 '],
['00:00.30','编曲：王浩铭 '],
['00:00.36 ','键盘：左壬鹏 '],
['00:00.42 ','吉他：支爽'],
['00:00.46 ','和声设计：吴采奇 '],
['00:00.55 ',' 和声：筠铃 '],
['00:00.60 ','制作人：郭朝阳'],
['00:00.67 ','录音：周明'],
['00:00.72 ','录音棚：半吨兄弟 Music studio'],
['00:00.82 ','混音&母带工程师：周明'],
['00:00.94 ','混音&母带棚：半吨兄弟 Music studio'],
['00:01.09 ','监制：胡伟'],
['00:01.20 ','你的爱总在不远地方等着我'],
['00:12.35','岁月如流在穿梭'],
['00:16.03','喜怒哀乐我深锁'],
['00:19.77','只因有你在天涯尽头等着我'],
['00:28.27','夜已沉默'],
['00:31.96','心事向谁说'],
['00:35.76','不肯回头'],
['00:39.47','所有的爱都错过'],
['00:43.25','别笑我懦弱'],
['00:46.92','我始终不能猜透'],
['00:50.77','为何人生淡薄'],
['00:58.29','风雨之后'],
['01:02.06','无所谓拥有'],
['01:05.76','萍水相逢'],
['01:09.46','你却给我那么多'],
['01:13.27','你挡住寒冬'],
['01:17.01','温暖只保留给我'],
['01:20.75','风霜寂寞'],
['01:24.55','凋落在你的怀中'],
['01:31.01','人生风景在游走'],
['01:34.78','每当孤独我回首'],
['01:38.57','你的爱总在不远地方等着我'],
['01:46.09','岁月如流在穿梭'],
['01:49.85','喜怒哀乐我深锁'],
['01:53.50','只因有你在天涯尽头等着我'],
['02:17.01','风雨之后'],
['02:20.67','无所谓拥有'],
['02:24.53','萍水相逢'],
['02:28.19','你却给我那么多'],
['02:31.99','你挡住寒冬'],
['02:35.69','温暖只保留给我'],
['02:39.45','风霜寂寞'],
['02:43.22','凋落在你的怀中'],
['02:49.73','人生风景在游走'],
['02:53.52','每当孤独我回首'],
['02:57.33','你的爱总在不远地方等着我'],
['03:04.77','岁月如流在穿梭'],
['03:08.50','喜怒哀乐我深锁'],
['03:12.33','只因有你在天涯尽头等着我'],
['03:19.78','人生风景在游走'],
['03:23.55','每当孤独我回首'],
['03:27.33','你的爱总在不远地方等着我'],
['03:34.78','岁月如流在穿梭'],
['03:38.57','喜怒哀乐我深锁'],
['03:42.29','只因有你在天涯尽头等着我'],
['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>
</td></tr></table>
水芙蓉也是速度的，套用的这么快{:4_178:} 小辣椒 发表于 2022-6-7 22:07
水芙蓉也是速度的，套用的这么快
哎呀！折腾半天了！小辣椒晚上好！ 醉美水芙蓉 发表于 2022-6-7 22:21
哎呀！折腾半天了！小辣椒晚上好！
你复制代码的时候这些不需要 <div class="t_fsz">
<table cellspacing="0" cellpadding="0"> 我今天下午进来就卡死我了，什么都不动了。吓得我赶紧关闭浏览器了。 漂亮，水芙蓉的帖子真棒{:4_187:} 制作精美，欣赏 小辣椒 发表于 2022-6-7 22:23
你复制代码的时候这些不需要
谢谢小辣椒指导！ 加林森 发表于 2022-6-7 22:29
我今天下午进来就卡死我了，什么都不动了。吓得我赶紧关闭浏览器了。
感谢队长支持！ 红影 发表于 2022-6-7 22:57
漂亮，水芙蓉的帖子真棒
谢谢红影美女支持！ 马黑黑 发表于 2022-6-7 23:10
制作精美，欣赏
感谢黑黑老师的代码，老师辛苦了！ 马黑黑 发表于 2022-6-7 23:10
制作精美，欣赏
老师的播放器太好了，手机也能看见！ 醉美水芙蓉 发表于 2022-6-8 07:01
老师的播放器太好了，手机也能看见！
手机上，关键是浏览器，不同品牌的手机，内置的浏览器不尽一致，但都可以自己安装合适的浏览器 醉美水芙蓉 发表于 2022-6-8 06:58
感谢队长支持！
不客气啦 醉美水芙蓉 发表于 2022-6-8 06:59
谢谢红影美女支持！
水芙蓉美女学得很快，真棒{:4_187:} 醉美水芙蓉 发表于 2022-6-8 06:58
谢谢小辣椒指导！
黑黑老师分享的源码没有这些多余代码的
不客气，祝玩的开心
页:
[1]