假响应式频谱演示

凡哥

假响应式频谱

凡哥

一楼代码：

1. <style>
   
2.         #papa { margin: 30px auto 0; padding: 10px; width: 800px; height: 400px; background: linear-gradient(to bottom right,lightblue,tan); box-shadow: 3px 6px 20px #000; border-radius: 6px; position: relative; --tst: .17s; }
   
3.         #papa h2 { margin: 6px 0; color: snow; font: bold 1.6em sans-serif; text-align: center; text-shadow: 2px 2px 2px #000; }
   
4.         #mplayer { margin: auto; position: absolute; width: 100%; height: 160px; bottom: 10px; display: flex; justify-content: center; align-items: flex-end; }
   
5.         .mLine { position: relative; margin: 0 2px 0 0; width: 6px; min-height: 10px; max-height: 200px; background: gray linear-gradient(to top,lightgreen,green,lightgreen); transition: var(--tst); }
   
6.         .mLine::before, .mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: snow; top: 0; }
   
7.         .mLine::after { top: 100%; }
   
8.         .tMid { margin: 0; padding: 12px 0; text-align: center; }
   
9. </style>
   
10. 
    
11. <div id="papa">
    
12.         <h2>假响应式频谱</h2>
    
13.         <div id="mplayer"></div>
    
14. </div>
    
15. <p class="tMid"><audio id="aud" src="https://yinpin.s3-us-east-1.ossfiles.com/lyria.mp3" autoplay loop controls></audio></p>
    
16. 
    
17. <script>
    
18. var ypData = [33,0,2,8,4,9,5,5,6,7,7,6,31,9,14,22,9,3,9,10,8,6,11,8,24,43,69,85,85,71,77,86,93,95,84,70,102,75,59,59,87,74,56,90,77,77,97,105,128,129,114,120,131,123,133,127,125,126,124,136,124,119,97,88,77,103,108,119,114,113,124,152,133,131,137,137,125,115,104,99,88,100,116,128,114,93,108,94,107,119,121,120,127,122,115,130,115,110,100,102,112,112,113,99,98,100,102,118,121,119,118,128,116,112,102,117,119,107,96,125,102,93,97,107,126,130,136,136,134,124,121,130,114,114,92,98,68,112,91,85,60,96,76,127,103,80,68,85,121,112,96,70,62,127,115,127,101,97,98,85,122,108,73,45,75,129,98,123,130,135,141,136,128,100,76,92,101,102,151,116,98,87,77,97,113,90,84,69,93,89,131,110,92,67,89,81,132,85,70,88,83,73,149,120,92,119,106,135,141,119,109,127,132,109,160,131,130,134,140,151,142,104,92,103,107,102,137,105,100,59,78,136,124,92,85,76,104,98,117,92,78,66,88,120,105,56,35,29,84,65,111,94,73,89,77,104,113,70,66,65,120,115,131,87,71,90,61,109,116,63,46,99,104,71,131,129,139,138,134,125,123,85,92,77,87,125,116,76,63,71,60,127,85,54,87,76,69,132,95,76,72,72,79,127,74,87,84,78,84,119,114,105,106,115,131,141,111,107,127,110,118,162,126,126,137,133,141,145,101,102,88,99,96,142,99,78,83,87,141,128,71,76,27,74,73,113,104,112,88,117,138,109,90,92,95,98,113,111,96,112,107,117,143,115,85,97,79,151,91,132,125,130,132,141,112,112,122,114,99,127,108,125,92,101,120,92,144,114,87,97,97,100,137,109,89,94,94,101,140,99,79,117,120,100,115,106,115,127,129,124,140,118,106,124,131,138,152,125,131,126,128,135,142,91,123,109,112,119,140,98,114,102,108,132,140,111,112,81,96,135,139,106,117,90,102,138,122,98,67,65,70,78,106,90,76,71,90,116,93,58,70,81,130,113,104,93,66,96,66,114,78,45,105,86,128,108,130,135,130,137,136,149,131,120,131,95,97,149,126,130,137,138,145,159,128,111,131,128,137,162,91,99,74,61,129,136,70,79,55,93,129,132,90,84,73,97,141,111,68,64,93,157,96,135,120,115,124,124,139,127,128,126,76,126,105,139,125,121,120,102,113,131,130,75,111,114,89,128,81,64,70,77,112,103,59,60,80,111,118,113,95,112,114,69,134,88,85,104,99,122,134,104,99,113,106,97,117,107,110,126,103,103,152,112,93,101,114,121,140,108,117,101,90,105,160,114,126,123,85,140,158,139,135,119,115,117,140,98,86,94,97,135,133,86,84,115,113,99,122,72,66,94,96,141,119,82,102,93,122,108,112,84,75,91,81,121,102,137,64,46,134,73,99,85,91,74,78,85,105,65,90,81,129,107,120,88,86,70,71,130,103,62,114,104,100,118,122,120,139,108,114,138,139,137,134,106,101,153,123,133,124,125,130,140,120,136,113,92,116,129,99,86,85,80,108,100,61,87,77,81,118,132,89,102,76,89,79,138,83,87,105,97,98,136,122,123,117,137,118,145,126,124,116,108,114,131,138,137,129,119,152,124,111,85,123,124,105,117,87,76,81,97,129,98,81,99,92,125,106,114,91,86,88,87,118,90,71,74,85,130,93,113,112,117,117,111,125,115,110,122,106,107,150,109,102,109,104,84,141,107,119,103,101,116,153,123,123,146,128,132,147,132,134,123,100,132,149,128,114,92,83,118,119,82,109,89,113,121,129,131,126,123,112,127,126,122,130,120,114,96,137,109,94,84,124,93,82,73,44,36,77,61,133,102,81,83,76,136,122,87,84,82,99,117,120,101,96,84,107,124,103,92,66,95,144,85,132,117,126,125,122,131,104,96,105,91,120,153,117,116,89,86,111,146,109,76,96,95,78,150,111,100,96,73,123,138,89,83,112,94,77,150,114,113,114,108,115,149,114,119,133,128,139,159,135,148,133,96,127,138,107,108,99,151,127,159,103,110,101,90,130,115,101,97,80,123,120,128,85,89,89,95,110,116,83,79,54,84,48,122,94,102,84,91,127,113,83,87,95,104,112,116,100,99,79,79,119,103,80,94,107,137,127,133,115,134,118,120,139,101,109,115,99,101,128,104,95,72,74,110,133,87,101,102,95,84,134,86,106,83,64,135,142,88,86,95,89,96,147,103,113,105,86,134,143,115,126,131,130,124,153,134,134,131,128,162,137,109,108,92,124,93,125,99,80,87,93,131,102,87,78,73,126,117,123,103,107,95,107,114,101,87,87,66,86,69,123,105,72,105,104,116,112,60,48,17,0,0,11,5,5,5,8,5,5,8,3,6,7,7,6,7,7,9,5,6,6,6,6,6,6,5,8,7,7,6,6,7,4,7,5,5,3,4,3,5,3,4,5,4,3,4,4,5,4,0,0,0,0,0,0,0,0];
    
19. 
    
20. var total = 40, lines = [], idx, len, step;
    
21. 
    
22. for(j=0; j < total; j++) {
    
23.         var el = document.createElement('span');
    
24.         el.className = 'mLine';
    
25.         mplayer.appendChild(el);
    
26.         lines.push(el);
    
27. }
    
28. 
    
29. plusOrMinus = () => Math.random() > 0.5 ? 1 : -1;
    
30. 
    
31. output = (all, num) => num === 0 ?
    
32.         Array(all).fill(0) :
    
33.         Array(all).fill(0).map(item => Math.ceil(Math.random() * num + plusOrMinus() * num / 2));
    
34. 
    
35. (function update() {
    
36.         var ar = output(total, aud.paused ? 0 : ypData[idx]);
    
37.         ar.forEach((a,k) => lines[k].style.height = ar[k] + 'px');
    
38.         window.requestAnimationFrame(update);
    
39. })();
    
40. 
    
41. aud.addEventListener('timeupdate', () => {
    
42.         idx = Math.floor(aud.currentTime / step);
    
43. });
    
44. 
    
45. aud.addEventListener('canplay', () => {
    
46.         len = ypData.length;
    
47.         step = aud.duration / len;
    
48.         papa.style.setProperty('--tst', step + 's');
    
49. });
    
50. </script>

复制代码

凡哥

音波数据的获取，需要音乐已经存在本地，然后：

http://mhh.52qingyin.cn/art/show ... &art=1692093449

凡哥

这是假的响应式频谱，真的响应式要比这个唯美，感兴趣的请参阅：

http://mhh.52qingyin.cn/api/player/xy/

凡哥

真响应式频谱需要同源或可跨域操作音频，有个人网站的都可以做，有一个放开cos权限的音频上传空间也可以做

凡哥

音频文件所富含的信息远比我们想象的丰富，它里面实际上记录有音波信息，JS有一个音频接口可以读取这些信息，前提是，操作音频的web页与音频所在位置是同源的即同一个网站域名之下（可以不同目录），抑或音频是开放了跨域读取功能的（cos），即 crossOrigin 是可匿名访问的。

醉美水芙蓉

老师晚上好！做贴辛苦了！

碧海

凡哥辛苦，感谢精彩分享，这个要有基础的才能看得懂，凡哥对代码的研究太厉害了~~

清梦

密密麻麻的的代码，老师太厉害了！

清梦

欣赏老师带来的精彩分享！