坊巷吟：新频谱通用版测试

马黑黑

红影

又是一个不同方式带来的频谱，设置得非常细致，通用性很强

马黑黑

代码分享

1. <style>
   
2. #mydiv {
   
3.     margin: 0 0 0 calc(50% - 593px);
   
4.     width: 1024px;
   
5.     height: 640px;
   
6.     background: linear-gradient(to top right,rgba(200,0,0,.7),rgba(0,100,100,.75));
   
7.     overflow: hidden;
   
8.     position: relative;
   
9.     --state: paused;
   
10. }
    
11. pinpu-wrapper {
    
12.     position: absolute;
    
13.     bottom: 0;
    
14.     left: 50%;
    
15.     transform: translate(-50%);
    
16.     cursor: pointer;
    
17. }
    
18. pin-pu {
    
19.     position: absolute;
    
20.     bottom: 0;
    
21.     animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state);
    
22. }
    
23. .leaf {
    
24.     position: absolute;
    
25.     width: 50px;
    
26.     height: 50px;
    
27.     top: -100px;
    
28.     border-radius: 0% 100%;
    
29.     background: linear-gradient(45deg, green, lightgreen);
    
30.     animation: drop 6s var(--delay) infinite linear var(--state);
    
31.     --delay: 0s;
    
32. }
    
33. .leaf:nth-of-type(2) { --delay: -2s; }
    
34. .leaf:nth-of-type(3) { --delay: -4s; }
    
35. @keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
    
36. @keyframes drop { to { transform: rotate(-10deg) translateY(760px); } }
    
37. </style>
    
38. 
    
39. <div id="mydiv">
    
40.     <pinpu-wrapper></pinpu-wrapper>
    
41.     <span class="leaf"></span>
    
42.     <span class="leaf"></span>
    
43.     <span class="leaf"></span>
    
44. </div>
    
45. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1805728327" autoplay loop></audio>
    
46. 
    
47. <script>
    
48. 
    
49. !function() {
    
50.     let pinpuNum = 60, pinpuWidth = 4, pinpuHeight = 160;
    
51.     let ppwrap = document.querySelector('pinpu-wrapper');
    
52. 
    
53.     let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
54. 
    
55.     let msort = (ar) => {
    
56.         let newAr = [];
    
57.         ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
    
58.         return newAr;
    
59.     }
    
60. 
    
61.     !function() {
    
62.         let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);
    
63.         Array.from({length: pinpuNum}).forEach((item,key) => {
    
64.             item = document.createElement('pin-pu');
    
65.             item.style.cssText += `
    
66.                 width: ${pinpuWidth}px;
    
67.                 left: ${(pinpuWidth + 2) * key}px;
    
68.                 background: #${Math.random().toString(16).substr(-6)};
    
69.                 --height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)[key]}px;
    
70.                 --du: ${Math.random() * .3 + .3}s;
    
71.                 --delay: -${Math.random()}s;
    
72.             `;
    
73.             ppwrap.appendChild(item);
    
74.         });
    
75.         ppwrap.style.height = `${pinpuHeight}px`;
    
76.         ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;
    
77.     }();
    
78. 
    
79.     aud.addEventListener('play', mState, false);
    
80.     aud.addEventListener('pause', mState, false);
    
81.     ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
82. }();
    
83. 
    
84. </script>

复制代码

马黑黑

第 50 行：

let pinpuNum = 60, pinpuWidth = 4, pinpuHeight = 160;

pinpuNum - 频谱条数量；
pinpuWidth - 频谱条宽度
pinpuHeight - 频谱条最大高度

若需要修改频谱条之间的间隙宽度，67 行 和 76 行的 2 同时修改，2表示两个像素。

若需要调整频谱位置，可在 CSS 代码中修改 pinpu-wrapper 选择器的相关属性值：

pinpu-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    cursor: pointer;
}

bottom: 0; 表示在帖子父元素的底部。可以使用 top 替代bottom，注意设置好 top 的数值；
红色代码，是为了令频谱在父元素中水平居中。

马黑黑

此版本是通用版本，兼容浏览器方面还是可以的（不太支持已被废弃的IE）。

马黑黑

若需要改变频谱的速率，修改第 70 行：

--du: ${Math.random() * .3 + .3}s;

这是CSS变量 --du 的值，JS 语句使用 Math.random() 方法做一个算法，各频谱条的此值在 0.3 ~ 0.6 之间。如果希望在 0.2 ~ 0.4 之间，把 .3 改为 .2 即可。

马黑黑

红影 发表于 2023-7-17 09:51
又是一个不同方式带来的频谱，设置得非常细致，通用性很强

这个用来做帖，可能更合适吧

红影

马黑黑 发表于 2023-7-17 09:56
这个用来做帖，可能更合适吧

!function() 加个感叹号的好像不多见。

红影

马黑黑 发表于 2023-7-17 09:56
这个用来做帖，可能更合适吧

是的，不用像之前那个需要波形数据了，可以自己调节奏

马黑黑

红影 发表于 2023-7-17 10:14
是的，不用像之前那个需要波形数据了，可以自己调节奏

波形数据是与音频同步的，那是不同的效果

马黑黑

红影 发表于 2023-7-17 10:03
!function() 加个感叹号的好像不多见。

(function() {
    //...
})();

的另外一种写法，注意比较它们的差异。还有别的写法。

红影

马黑黑 发表于 2023-7-17 10:32
(function() {
    //...
})();

我比较不出来差异啊

红影

马黑黑 发表于 2023-7-17 10:30
波形数据是与音频同步的，那是不同的效果

记得还有个不需要波形的频谱，各种代码的频谱黑黑都做了，很赞

马黑黑

红影 发表于 2023-7-17 11:02
记得还有个不需要波形的频谱，各种代码的频谱黑黑都做了，很赞

玩玩而已

马黑黑

红影 发表于 2023-7-17 10:57
我比较不出来差异啊

最后的 )() ，红色的那个，用感叹号的是没有的

马黑黑

醉美水芙蓉 发表于 2023-7-17 12:04
看看月儿的表现了！月儿第一喔！

可能正在赶工

小辣椒

马黑黑 发表于 2023-7-17 09:08
此版本是通用版本，兼容浏览器方面还是可以的（不太支持已被废弃的IE）。

这些解析说明还是要认真看看的

小辣椒

马黑黑 发表于 2023-7-17 10:30
波形数据是与音频同步的，那是不同的效果

那些有频谱的节奏感

马黑黑

小辣椒 发表于 2023-7-17 12:42
那些有频谱的节奏感

那是自然的