游戏人间

马黑黑 发表于 2022-8-31 07:40

马黑黑 发表于 2022-8-31 07:45

完整代码：
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('/data/attachment/forum/202208/31/073827y0lnqwkllq14541a.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; user-select: none; z-index: 1; }
#mplayer { position: absolute; left: calc(50% - 150px); bottom: 10px; width: 300px; height: 86px; background: rgba(0,0,0,.35); border: 4px double #ccc; border-radius: 3px; border-color: red orange purple tomato; backdrop-filter: blur(4px); display: grid; place-items: center; }
#mplayer span { position: absolute; transition: .5s; }
#lrc { top: 4px; padding: 2px; font: normal 1.4em sans-serif; color: #fff; text-shadow: 1px 1px 1px #000; }
#prog { bottom: 6px; width: 290px; height: 1px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer; }
#prog::before { position: absolute; height: 10px; width: 290px; top: -4px; content: ''; }
#btnmain { bottom: 14px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnmain:hover { background: orange; }
#btnplay { position: absolute; left: 8px; width: 16px; height: 16px; background: #bbb; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { position: absolute; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #bbb; display: none; }
#dur, #cur { font: normal 14px sans-serif; bottom: 14px; color: #eee; }
#dur:hover, #cur:hover, #lrc:hover { color: tomato; }
#cur { left: 5px ; }
#dur { right: 5px; }
</style>

<div id="papa">
<div id="mplayer">
<span id="lrc">lrc歌词</span>
<span id="prog"></span>
<span id="btnmain">
<span id="btnplay"></span>
<span id="btnpause"></span>
</span>
<span id="dur">00:00</span>
<span id="cur">00:00</span>
</div>
</div>

<script>
let lrcAr = [
['0.00','游戏人间-童安格'],
['4.08','词：何启弘'],
['9.06','曲：童安格'],
['14.04','我停留在繁华人间'],
['19.08','多少梦最后成凄凉'],
['27.03','你将会歇脚在何方'],
['33.02','去等待心中的渴望'],
['40.09','笑看人生的繁华'],
['46.07','变化无奈潇洒又何妨'],
['54.04','何不游戏人间'],
['56.00','管它虚度多少岁月'],
['60.10','何不游戏人间'],
['62.07','看清恩怨怨'],
['66.04','何不游戏人间'],
['69.04','喔'],
['69.08','管它风风波波多少年'],
['75.07','何不游戏人间'],
['76.08','不如展开笑颜'],
['78.04','不成眠'],
['94.09','你将会歇脚在何方'],
['100.10','去等待心中的渴望'],
['108.04','笑看人生的繁华'],
['114.04','变化无奈潇洒又何妨'],
['122.01','何不游戏人间'],
['123.06','管它虚度多少岁月'],
['128.06','何不游戏人间'],
['130.03','看清恩怨怨'],
['131.04','喔'],
['135.04','何不游戏人间'],
['137.00','管它风风波波多少年'],
['139.05','何不游戏人间'],
['143.08','不如展开笑颜'],
['147.06','不成眠'],
['193.00','笑看人生的繁华'],
['199.08','变化无奈潇洒又何妨'],
['206.06','何不游戏人间'],
['208.00','管它虚度多少岁月'],
['213.02','何不游戏人间'],
['214.08','看清恩怨怨'],
['218.06','喔'],
['220.01','何不游戏人间'],
['221.08','管它风风波波多少年'],
['227.00','何不游戏人间'],
['228.08','不如展开笑颜'],
['232.00','不成眠'],
['233.05','何不游戏人间'],
['235.01','管它虚度多少岁月'],
['240.04','何不游戏人间'],
['241.08','看清恩怨怨'],
['245.03','喔'],
['246.10','何不游戏人间'],
['248.06','管它风风波波多少年'],
['253.07','何不游戏人间'],
['255.04','不如展开笑颜'],
['257.01','不成眠']
];
let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=150753.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
dur.innerText = toMin(aud.duration);
cur.innerText = toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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>

马黑黑 发表于 2022-8-31 07:54

几点说明：

一、播放器的物理位置，通过 #mplayer 选择器设置；

二、设定 #mplayer 尺寸，横向元素的物理位置设定基本不会改变，但 #prog 选择器（进度条）需要设置宽度为父元素宽度 - 10，纵向位置，#lrc 选择器需要向上调整物理位置；

三、#lrc选择器是lrc歌词盒子，文本颜色等在此设置；

四、#prog 选择器使用before伪元素的原因：进度线条为 1 像素，为便于鼠标操作进度，加一个10个像素高度的before伪元素，以较大面积接收鼠标操作；

五、播放器的归拢元素 #mplayer 选择器使用双边框设置，四条边框各有自己的颜色。

加林森 发表于 2022-8-31 08:29

老黑早晨好。今天又有玩的了。谢谢啦！

红影发表于 2022-8-31 09:54

黑黑又设置了一种播放器形式，这样的半透明背景也很美{:4_199:}

梦油发表于 2022-8-31 10:02

黑黑朋友早晨好！我很喜欢欣赏童安格的演唱风度，他的演唱不温不火、含情脉脉。谢谢你！

红影发表于 2022-8-31 10:08

这个各色边框的归拢元素很适合这张背景的灯光秀，太美了{:4_199:}

醉美水芙蓉 发表于 2022-8-31 11:37

马黑黑 发表于 2022-8-31 12:20

醉美水芙蓉发表于 2022-8-31 11:37
灯光秀很美，谢谢黑黑老师分享好作品！

{:4_190:}喝水

马黑黑 发表于 2022-8-31 12:54

加林森发表于 2022-8-31 08:29
老黑早晨好。今天又有玩的了。谢谢啦！

好玩多玩玩{:4_170:}

马黑黑 发表于 2022-8-31 12:55

梦油发表于 2022-8-31 10:02
黑黑朋友早晨好！我很喜欢欣赏童安格的演唱风度，他的演唱不温不火、含情脉脉。谢谢你！

童安格的魅力在于歌声沉稳中有活跃，活跃中有定力。

马黑黑 发表于 2022-8-31 12:55

红影发表于 2022-8-31 10:08
这个各色边框的归拢元素很适合这张背景的灯光秀，太美了

感谢支持

马黑黑 发表于 2022-8-31 12:55

红影发表于 2022-8-31 09:54
黑黑又设置了一种播放器形式，这样的半透明背景也很美

新瓶装旧酒而已{:4_170:}

红影发表于 2022-8-31 13:25

马黑黑发表于 2022-8-31 12:55
新瓶装旧酒而已

但展示效果上的确不一样呢{:4_204:}

加林森 发表于 2022-8-31 13:28

马黑黑发表于 2022-8-31 12:54
好玩多玩玩

必须的。{:4_205:}

梦油发表于 2022-8-31 14:16

马黑黑发表于 2022-8-31 12:55
童安格的魅力在于歌声沉稳中有活跃，活跃中有定力。

而且，我也喜欢童安格的台风。

马黑黑 发表于 2022-8-31 18:10

梦油发表于 2022-8-31 14:16
而且，我也喜欢童安格的台风。

很帅气的

马黑黑 发表于 2022-8-31 18:11

红影发表于 2022-8-31 13:25
但展示效果上的确不一样呢

外包装不同

东篱闲人 发表于 2022-8-31 18:12

漂亮，流光溢彩。。。{:5_116:}

马黑黑 发表于 2022-8-31 18:13

东篱闲人发表于 2022-8-31 18:12
漂亮，流光溢彩。。。

{:4_181:}

页: [1] 2 3

花潮论坛's Archiver

游戏人间