大风歌（新频谱播放器测试）

马黑黑

花潮lrc在线

00:00

00:00

马黑黑

代码（都展开）

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: #666 url('https://638183.freep.cn/638183/t22/webp/dafggee.webp') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         z-index: 1;
   
10. }
    
11. #mplayer {
    
12.         position: absolute;
    
13.         display: grid;
    
14.         grid-template-areas:
    
15.                 'cur btnplay dur'
    
16.                 'prog prog prog';
    
17.         gap: 4px;
    
18.         place-items: end center;
    
19.         font-size: 14px;
    
20.         bottom: 20px;
    
21.         left: 20px;
    
22. }
    
23. #cur { grid-area: cur; color: snow; }
    
24. #dur { grid-area: dur; color: snow; }
    
25. #btnplay {
    
26.         grid-area: btnplay;
    
27.         display: grid;
    
28.         grid-auto-flow: column;
    
29.         place-items: end center;
    
30.         gap: 0 4px;
    
31.         height: 60px;
    
32.         cursor: pointer;
    
33. }
    
34. #btnplay > span {
    
35.         background: red;
    
36.         width: 4px;
    
37.         transition: .6s;
    
38. }
    
39. #prog {
    
40.         --ww: 0px;
    
41.         grid-area: prog;
    
42.         width: 400px;
    
43.         height: 12px;
    
44.         border-radius: 6px;
    
45.         background: snow;
    
46.         opacity: .65;
    
47.         cursor: pointer;
    
48.         position: relative;
    
49. }
    
50. #prog::before {
    
51.         position: absolute;
    
52.         content: '';
    
53.         width: var(--ww);
    
54.         height: 12px;
    
55.         border-radius: 6px;
    
56.         background: snow linear-gradient(90deg, green,red);
    
57.         opacity: .65;
    
58. }
    
59. #lrc {
    
60.         --motion: cover1;
    
61.         --tt: 5s;
    
62.         --state: paused;
    
63.         position: absolute;
    
64.         top: 20px;
    
65.         left: 20px;
    
66.         font: bold 2.4em sans-serif;
    
67.         color: hsl(0, 10%, 90%);
    
68.         -webkit-background-clip: text;
    
69.         filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
    
70. }
    
71. #lrc::before {
    
72.         position: absolute;
    
73.         content: attr(data-lrc);
    
74.         width: 20%;
    
75.         height: 100%;
    
76.         color: transparent;
    
77.         overflow: hidden;
    
78.         white-space: nowrap;
    
79.         background: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75));
    
80.         filter: inherit;
    
81.         -webkit-background-clip: text;
    
82.         animation: var(--motion) var(--tt) linear forwards;
    
83.         animation-play-state: var(--state);
    
84. }
    
85. @keyframes cover1 {
    
86.         from { width: 0; }
    
87.         to { width: 100%; }
    
88. }
    
89. 
    
90. @keyframes cover2 {
    
91.         from { width: 0; }
    
92.         to { width: 100%; }
    
93. }
    
94. </style>
    
95. 
    
96. <div id="papa">
    
97.         <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
    
98.         <div id="mplayer">
    
99.                 <div id="cur">00:00</div>
    
100.                 <div id="btnplay"></div>
     
101.                 <div id="dur">00:00</div>
     
102.                 <div id="prog"></div>
     
103.         </div>
     
104.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31587566.mp3" loop autoplay></audio>
     
105. </div>
     
106. 
     
107. <script>
     
108. (function() {
     
109.         let mKey = 0, mFlag = true;
     
110. let lrcAr = [
     
111.         [0.06,"大风歌",30.7],
     
112.         [30.71,"演唱 : 极泷",13.8],
     
113.         [44.46,"望华车市井夺未央",6.2],
     
114.         [51.39,"尘沙起鸿门巧对王",6.2],
     
115.         [58.32,"纳贤良无畏得天下",6.2],
     
116.         [64.94,"三章法垓下定汉疆",13.2],
     
117.         [78.22,"大风起兮云飞扬",13.2],
     
118.         [92.52,"威加海内兮归故乡",6.4],
     
119.         [99.4,"安得猛士兮",1.7],
     
120.         [100.4,"守四方 —— ——",6.5],
     
121.         [108.96,"大风起兮云飞扬",13.2],
     
122.         [123.27,"威加海内兮归故乡",6.4],
     
123.         [130.34,"安得猛士兮",1.7],
     
124.         [132.34,"守四方 —— ——",6.5],
     
125.         [139.56,"守四方 —— ——",7.0]
     
126. ];
     
127.         for(j=0; j<20; j++) {
     
128.                 let pinpu = document.createElement('span');
     
129.                 pinpu.className = 'pinpu';
     
130.                 pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
     
131.                 btnplay.appendChild(pinpu);
     
132.         }
     
133.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
     
134.         prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
     
135.         aud.addEventListener('seeked', () => calcKey());
     
136.         aud.addEventListener('pause', () => mState());
     
137.         aud.addEventListener('play', () => mState());
     
138.         aud.addEventListener('timeupdate', () => {
     
139.                 let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
     
140.                 prog.style.setProperty('--ww', prg + 'px');
     
141.                 cur.innerText = toMin(aud.currentTime);
     
142.                 dur.innerText = toMin(aud.duration);
     
143.                 setPinpu();
     
144.                 for (j = 0; j < lrcAr.length; j++) {
     
145.                         if (aud.currentTime >= lrcAr[j][0]) {
     
146.                                 cKey = j;
     
147.                                 if (mKey === j) showLrc(lrcAr[j][2]);
     
148.                                 else continue;
     
149.                         }
     
150.                 }
     
151.         });
     
152.         let calcKey = () => {
     
153.                 for (j = 0; j < lrcAr.length; j++) {
     
154.                         if (aud.currentTime <= lrcAr[j][0]) {
     
155.                                 mKey = j - 1;
     
156.                                 break;
     
157.                         }
     
158.                 }
     
159.                 if (mKey < 0) mKey = 0;
     
160.                 if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
161.                 let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
162.                 showLrc(time);
     
163.         };
     
164.         let showLrc = (time) => {
     
165.                 let name = mFlag ? 'cover1' : 'cover2';
     
166.                 lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];
     
167.                 lrc.style.setProperty('--motion', name);
     
168.                 lrc.style.setProperty('--tt', time + 's');
     
169.                 lrc.style.setProperty('--state', 'running');
     
170.                 mKey += 1;
     
171.                 mFlag = !mFlag;
     
172.         };
     
173.         let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
174.         let toMin = (val) => {
     
175.                 if (!val) return '00:00';
     
176.                 val = Math.floor(val);
     
177.                 let min = parseInt(val / 60),
     
178.                 sec = parseFloat(val % 60);
     
179.                 if (min < 10) min = '0' + min;
     
180.                 if (sec < 10) sec = '0' + sec;
     
181.                 return min + ':' + sec;
     
182.         };
     
183.         let setPinpu = ()  => {
     
184.                 let eles = document.querySelectorAll('.pinpu');
     
185.                 eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
     
186.         };
     
187. })();
     
188. </script>

复制代码

马黑黑

一些说明：

https://www.huachaowang.com/foru ... &extra=page%3D1

相约爱晚亭

欣赏！学习！

小辣椒

黑黑辛苦，又有新的播放器出来了而且是频谱的

小辣椒

手机欣赏完美

红影

这个播放器在帖子里非常漂亮。大风歌，是刘邦的大气豪迈的抱负，发现领袖人物的诗句大都与常人不同，真正的文如其人了。

梦油

气吞山河、排山倒海，真有气势！

马黑黑

醉美水芙蓉 发表于 2022-10-31 17:07
制作漂亮，这个播放器非常完美！

看看有木有啥问题

马黑黑

梦油 发表于 2022-10-31 15:54
气吞山河、排山倒海，真有气势！

刘邦的气势也是一点一滴积累的

樵歌

气势恢宏！大风起兮云飞扬。

马黑黑

红影 发表于 2022-10-31 15:34
这个播放器在帖子里非常漂亮。大风歌，是刘邦的大气豪迈的抱负，发现领袖人物的诗句大都与常人不同，真正的 ...

刘邦文化不高，不会写诗。得天下后回老家，有感而发，就这么几句：大风起兮云飞扬，威加海内兮归故乡，安得猛士兮守四方。很朴素但有气势，气势是点点滴滴积累而来，从流氓习气到霸气，再渐渐演变为杀气、豪气。

马黑黑

小辣椒 发表于 2022-10-31 13:55
手机欣赏完美

应该可以的

马黑黑

小辣椒 发表于 2022-10-31 13:54
黑黑辛苦，又有新的播放器出来了而且是频谱的

频谱之前是做过的，这个呢，还是未能与音频的高低建立起关系（代码会很多，兼容性目前也未必好）。

马黑黑

相约爱晚亭 发表于 2022-10-31 13:26
欣赏！学习！

感谢支持

马黑黑

樵歌 发表于 2022-10-31 18:15
气势恢宏！大风起兮云飞扬。

若换作你，你的大风歌会比这个豪气

樵歌

马黑黑 发表于 2022-10-31 18:18
若换作你，你的大风歌会比这个豪气

成王败寇，没有运气。

马黑黑

樵歌 发表于 2022-10-31 18:40
成王败寇，没有运气。

一起都是靠运气，这个道理，在刘邦身上最经典

红影

马黑黑 发表于 2022-10-31 18:16
刘邦文化不高，不会写诗。得天下后回老家，有感而发，就这么几句：大风起兮云飞扬，威加海内兮归故乡，安 ...

最后养成真正的帝王之气。