游戏人间

马黑黑

lrc歌词 00:00 00:00

马黑黑

完整代码：

1. <style>
   
2.         #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; }
   
3.         #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; }
   
4.         #mplayer span { position: absolute; transition: .5s; }
   
5.         #lrc { top: 4px; padding: 2px; font: normal 1.4em sans-serif; color: #fff; text-shadow: 1px 1px 1px #000; }
   
6.         #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; }
   
7.         #prog::before { position: absolute; height: 10px; width: 290px; top: -4px; content: ''; }
   
8.         #btnmain { bottom: 14px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
   
9.         #btnmain:hover { background: orange; }
   
10.         #btnplay { position: absolute; left: 8px; width: 16px; height: 16px; background: #bbb; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
    
11.         #btnpause { position: absolute; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #bbb; display: none; }
    
12.         #dur, #cur { font: normal 14px sans-serif; bottom: 14px; color: #eee; }
    
13.         #dur:hover, #cur:hover, #lrc:hover { color: tomato; }
    
14.         #cur { left: 5px ; }
    
15.         #dur { right: 5px; }
    
16. </style>
    
17. 
    
18. <div id="papa">
    
19. <div id="mplayer">
    
20.         <span id="lrc">lrc歌词</span>
    
21.         <span id="prog"></span>
    
22.         <span id="btnmain">
    
23.                 <span id="btnplay"></span>
    
24.                 <span id="btnpause"></span>
    
25.         </span>
    
26.         <span id="dur">00:00</span>
    
27.         <span id="cur">00:00</span>
    
28. </div>
    
29. </div>
    
30. 
    
31. <script>
    
32. let lrcAr = [
    
33.         ['0.00','游戏人间-童安格'],
    
34.         ['4.08','词：何启弘'],
    
35.         ['9.06','曲：童安格'],
    
36.         ['14.04','我停留在繁华人间'],
    
37.         ['19.08','多少梦最后成凄凉'],
    
38.         ['27.03','你将会歇脚在何方'],
    
39.         ['33.02','去等待心中的渴望'],
    
40.         ['40.09','笑看人生的繁华'],
    
41.         ['46.07','变化无奈潇洒又何妨'],
    
42.         ['54.04','何不游戏人间'],
    
43.         ['56.00','管它虚度多少岁月'],
    
44.         ['60.10','何不游戏人间'],
    
45.         ['62.07','看清恩怨怨'],
    
46.         ['66.04','何不游戏人间'],
    
47.         ['69.04','喔'],
    
48.         ['69.08','管它风风波波多少年'],
    
49.         ['75.07','何不游戏人间'],
    
50.         ['76.08','不如展开笑颜'],
    
51.         ['78.04','不成眠'],
    
52.         ['94.09','你将会歇脚在何方'],
    
53.         ['100.10','去等待心中的渴望'],
    
54.         ['108.04','笑看人生的繁华'],
    
55.         ['114.04','变化无奈潇洒又何妨'],
    
56.         ['122.01','何不游戏人间'],
    
57.         ['123.06','管它虚度多少岁月'],
    
58.         ['128.06','何不游戏人间'],
    
59.         ['130.03','看清恩怨怨'],
    
60.         ['131.04','喔'],
    
61.         ['135.04','何不游戏人间'],
    
62.         ['137.00','管它风风波波多少年'],
    
63.         ['139.05','何不游戏人间'],
    
64.         ['143.08','不如展开笑颜'],
    
65.         ['147.06','不成眠'],
    
66.         ['193.00','笑看人生的繁华'],
    
67.         ['199.08','变化无奈潇洒又何妨'],
    
68.         ['206.06','何不游戏人间'],
    
69.         ['208.00','管它虚度多少岁月'],
    
70.         ['213.02','何不游戏人间'],
    
71.         ['214.08','看清恩怨怨'],
    
72.         ['218.06','喔'],
    
73.         ['220.01','何不游戏人间'],
    
74.         ['221.08','管它风风波波多少年'],
    
75.         ['227.00','何不游戏人间'],
    
76.         ['228.08','不如展开笑颜'],
    
77.         ['232.00','不成眠'],
    
78.         ['233.05','何不游戏人间'],
    
79.         ['235.01','管它虚度多少岁月'],
    
80.         ['240.04','何不游戏人间'],
    
81.         ['241.08','看清恩怨怨'],
    
82.         ['245.03','喔'],
    
83.         ['246.10','何不游戏人间'],
    
84.         ['248.06','管它风风波波多少年'],
    
85.         ['253.07','何不游戏人间'],
    
86.         ['255.04','不如展开笑颜'],
    
87.         ['257.01','不成眠']
    
88. ];
    
89. let aud = new Audio();
    
90. 
    
91. aud.src = 'https://music.163.com/song/media/outer/url?id=150753.mp3';
    
92. aud.autoplay = true;
    
93. aud.loop = true;
    
94. btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
    
95. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
96. aud.addEventListener('pause', () => btnstate());
    
97. aud.addEventListener('play',() => btnstate());
    
98. aud.addEventListener('timeupdate', () => {
    
99.         prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
    
100.         dur.innerText = toMin(aud.duration);
     
101.         cur.innerText = toMin(aud.currentTime);
     
102.         for(j=0; j<lrcAr.length; j++) {
     
103.                 if(aud.currentTime >= lrcAr[j][0]) lrc.innerText = lrcAr[j][1];
     
104.         }
     
105. });
     
106. let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
     
107. let toMin = (val) => {
     
108.         if (!val) return '00:00';
     
109.         val = Math.floor(val);
     
110.         let min = parseInt(val / 60), sec = parseFloat(val % 60);
     
111.         if(min < 10) min = '0' + min;
     
112.         if(sec < 10) sec = '0' + sec;
     
113.         return min + ':' + sec;
     
114. }
     
115. </script>

复制代码

马黑黑

几点说明：

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

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

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

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

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

加林森

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

红影

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

梦油

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

红影

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

马黑黑

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

喝水

马黑黑

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

好玩多玩玩

马黑黑

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

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

马黑黑

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

感谢支持

马黑黑

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

新瓶装旧酒而已

红影

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

但展示效果上的确不一样呢

加林森

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

必须的。

梦油

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

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

马黑黑

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

很帅气的

马黑黑

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

外包装不同

东篱闲人

漂亮，流光溢彩。。。

马黑黑

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