祁隆情歌对唱（学习黑黑九妹效果）
<style>#papa { left: -344px; width: 1280px; height: 650px; top: 150px; display: grid; place-items: center; background: gray url('https://wj.zp68.com/lxx/yunhua/2022/08/27/GIF.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { padding: 250px; position: absolute; bottom: -170px; left: 14px;width: fit-content; height: fit-content; display: flex; gap: 80px; flex-direction: column; }
#lrctext { font: bold 2em sans-serif; color: GoldEnrod; text-shadow: 1px 1px 1px #000; text-align: center; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnplay { width: 26px; height: 26px; background: url('https://wj.zp68.com/lxx/yunhua/2022/08/27/ann.png') -31px -24.5px no-repeat; border-radius: 50%; cursor: pointer; }
#btnplay:hover { border: 0px solid transparent; }
#prgline { width: 280px; height: 2px;background: #ccc linear-gradient(red,red) no-repeat ; background-size: 1px 2px; display: block; cursor: pointer;}
#tmsg { width: auto; color: Gray; }
</style>
<div id="papa">
<div id="player">
<div id="lrctext">lrc歌词</div>
<div id="btnwrap">
<span id="btnplay"></span>
<span id="prgline"></span>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
</div>
<script>
let lrcAr = [
['00.00','爱你一生'],
['5.30','词/曲：祁隆'],
['8.07','演唱：祁隆 & 乐凡'],
['11.88','谢谢黑黑教程分享'],
['20.23','想着你'],
['22.49','曾经的温柔'],
['24.92','不知不觉眼泪在流'],
['29.75','轻轻伸出手'],
['32.18','想把你挽留'],
['34.60','仿佛一切在梦游'],
['39.14','想着你'],
['41.69','含情的双眸'],
['44.14','几多思念几多忧愁'],
['49.26','默默的回首'],
['51.42','又是一个秋'],
['53.81','期待再次与你邂逅'],
['58.41','一生为爱信守'],
['60.97','没有任何奢求'],
['63.45','只想陪你一起走'],
['67.96','我执着去等候'],
['70.50','任寂寞在心头'],
['72.88','爱你一生不回头'],
['77.69','LRC编辑：小辣椒'],
['96.90','想着你'],
['99.12','含情的双眸'],
['101.83','几多思念几多忧愁'],
['106.68','默默的回首'],
['108.92','又是一个秋'],
['111.35','期待再次与你邂逅'],
['116.03','一生为爱信守'],
['118.67','没有任何奢求'],
['121.20','只想陪你一起走'],
['125.74','我执着去等候'],
['128.30','任寂寞在心头'],
['130.51','爱你一生不回头'],
['135.86','想着你'],
['137.81','含情的双眸'],
['140.13','几多思念几多忧愁'],
['144.74','默默的回首'],
['147.36','又是一个秋'],
['149.67','期待再次与你邂逅'],
['154.40','一生为爱信守'],
['157.08','没有任何奢求'],
['159.39','只想陪你一起走'],
['164.17','我执着去等候'],
['166.46','任寂寞在心头'],
['169.25','爱你一生不回头'],
['173.65','爱你一生不回头'],
['183.30','谢谢欣赏！'],
['197.86','谢谢欣赏！']
];
let aud = new Audio(), lw = prgline.offsetWidth, bgpic = 'https://wj.zp68.com/lxx/yunhua/2022/08/27/ann.png';
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/08/27/011.mp3';
aud.autoplay = true;
aud.loop = true;
prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnplay.style.background = 'url(' + bgpic +') -62px -24.5px no-repeat');
aud.addEventListener('pause', ()=> btnplay.style.background = 'url(' + bgpic + ') -31px -24.5px no-repeat');
aud.addEventListener('timeupdate', () => {
prgline.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
}
});
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
<br><br><br><br><br><br><br><br><br><br> @马黑黑
谢谢黑黑的教程，非常喜欢的播放器
在做这个播放器的时候，感觉我一般图比较大，按钮感觉小了一点，我想自己修改换按钮，结果不行，真的佩服黑黑大神居然可以用这种图片按钮，我换了图片按钮就是捣鼓不好，你还设置了圆的我上去方的，不会调整尺寸{:4_201:}
来不及了去吃饭了，晚上回家再上来 制作漂亮。赞！{:4_199:} 小辣椒 发表于 2022-8-27 17:45
觉得用这样的还得去量尺寸，好麻烦的。直接用透明图不好的么{:4_173:} 小辣椒 发表于 2022-8-27 17:45
来不及了去吃饭了，晚上回家再上来
我去量了一下亲爱的上传的图图，修改尺寸如下：
css里的
#btnplay { width: 34px; height: 34px; background: url('https://www.huachaowang.com/data/attachment/forum/202208/27/174503edpq5qebkdw555zb.png') -10px -11px no-repeat; cursor: pointer; }
js里的
let aud = new Audio(), lw = prgline.offsetWidth, bgpic ='https://www.huachaowang.com/data/attachment/forum/202208/27/174503edpq5qebkdw555zb.png';
aud.addEventListener('playing', ()=> btnplay.style.background = 'url(' + bgpic +') -58px -11px no-repeat');
aud.addEventListener('pause', ()=> btnplay.style.background = 'url(' + bgpic + ') -10px -11px no-repeat');
在本地试了一下，虽然量得不算准，但基本是对的。
两个地方要换图片，两个地方要修改数字。
就是你上面那个绿色按钮试的。如果换其他按钮，估计数字又会不对了{:4_173:} 很美，花潮有老马驾车，你们的技术也越来越精妙 小辣椒 发表于 2022-8-27 17:44
@马黑黑
谢谢黑黑的教程，非常喜欢的播放器
你想放独立图片的话更好办的：
在CSS里定义的按钮标签的尺寸和图片一样，并给出第一个图片，url('图片一地址') no-repeat; ，在JS里则——
'playing' 监听那句，url('暂停图片地址') no-repeat;
'pause' 监听那句, url('播放图片地址') no-repeat; 小辣椒 发表于 2022-8-27 17:44
@马黑黑
谢谢黑黑的教程，非常喜欢的播放器
如果不是独立图片，则按照我的模式，按钮同样设置为实际单个按钮的大小，这个你要量一下。然后，第一张图，假设从10像素开始时按钮、上下各是5px的空白，则 url('图片地址') -10px -5px no-repeat; 第二张图，假设从120像素开始时按钮，则 url('图片地址') -120px -5px no-repeat;
小辣椒朋友晚上好！高级制作，赏心悦目。 加林森 发表于 2022-8-27 17:58
制作漂亮。赞！
谢谢队长{:4_187:} 红影 发表于 2022-8-27 19:03
我去量了一下亲爱的上传的图图，修改尺寸如下：
css里的
#btnplay { width: 34px; height: 34px; backg ...
谢谢亲爱的，我明天去试一下，今天匆匆忙忙做好也是不会改尺寸 上海朝阳 发表于 2022-8-27 19:05
很美，花潮有老马驾车，你们的技术也越来越精妙
谢谢朝阳大哥欣赏，{:4_187:} 马黑黑 发表于 2022-8-27 20:12
你想放独立图片的话更好办的：
在CSS里定义的按钮标签的尺寸和图片一样，并给出第一个图片，url('图片 ...
黑黑，我刚才就这样想的，但都没有时间多想，完成就发了，叫吃饭电话几个了{:4_170:} 马黑黑 发表于 2022-8-27 20:17
如果不是独立图片，则按照我的模式，按钮同样设置为实际单个按钮的大小，这个你要量一下。然后，第一张图 ...
黑黑我还发现一个问题，可能就不是独立图片的原因，点击播放器按钮。播放器和歌词一起回晃动一下，我把歌词改大了就好一点 小辣椒 发表于 2022-8-27 20:45
谢谢队长
不客气的。 红影 发表于 2022-8-27 19:04
就是你上面那个绿色按钮试的。如果换其他按钮，估计数字又会不对了
是的，我试了几个的，数据都有不一样，但最好是独立图片 梦油 发表于 2022-8-27 20:27
小辣椒朋友晚上好！高级制作，赏心悦目。
谢谢梦油老前辈欣赏{:4_179:}