橄榄树：演示用类做的频谱

马黑黑

马黑黑

代码（已修正频谱在手机浏览器下颠倒的现象，但未能解决手机版下频谱的抖动问题）

1. <style>
   
2. #mydiv {
   
3.     margin: 0 0 0 calc(50% - 593px);
   
4.     width: 1024px;
   
5.     height: 640px;
   
6.     border: 1px solid gray;
   
7.     overflow: hidden;
   
8.     position: relative;
   
9.     --state: paused;
   
10. }
    
11. .leaf {
    
12.     position: absolute;
    
13.     width: 50px;
    
14.     height: 50px;
    
15.     top: -100px;
    
16.     border-radius: 0% 100%;
    
17.     background: linear-gradient(45deg, green, lightgreen);
    
18.     animation: drop 6s var(--delay) infinite linear var(--state);
    
19.     --delay: 0s;
    
20. }
    
21. .leaf:nth-of-type(2) { --delay: -2s; }
    
22. .leaf:nth-of-type(3) { --delay: -4s; }
    
23. @keyframes drop { to { transform: rotate(-10deg) translateY(760px); } }
    
24. </style>
    
25. 
    
26. <div id="mydiv">
    
27.     <span class="leaf"></span>
    
28.     <span class="leaf"></span>
    
29.     <span class="leaf"></span>
    
30. </div>
    
31. 
    
32. <script>
    
33. 
    
34. let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
35. let msort = (ar) => {
    
36.     let newAr = [];
    
37.     ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
    
38.     return newAr;
    
39. }
    
40. 
    
41. class Pinpu {
    
42.     constructor(pa) {
    
43.         this.pa = pa;
    
44.         this.aud = document.createElement('audio');
    
45.         this.wrap = document.createElement('div');
    
46.         this.pinpu = { num: 60, width: 6, height: 100 }
    
47.     }
    
48.     createPinpu() {
    
49.         let styles = document.styleSheets;
    
50.         let mcss = document.styleSheets[styles.length - 1];
    
51.         mcss.insertRule(`.mplayer { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%); display: flex; align-items: flex-end; justify-items: flex-start; cursor: pointer; }`, mcss.rules.length);
    
52.         mcss.insertRule(`@keyframes up { from { height: 0px; } to { height: var(--height); } }`, mcss.rules.length);
    
53.         this.wrap.className = 'mplayer';
    
54.         this.aud.id = 'aud';
    
55.         this.aud.autoplay = true;
    
56.         this.aud.loop = true;
    
57.         this.pa.appendChild(this.wrap);
    
58.         this.pa.appendChild(this.aud);
    
59. 
    
60.         Array.from({length: this.pinpu.num}).forEach((item,key) => {
    
61.             item = document.createElement('span');
    
62.             let ar = Array.from(Array(this.pinpu.num), (v,k) => this.pinpu.num - k -1);
    
63.             item.style.cssText = `
    
64.                 margin-right: 2px;
    
65.                 align-self: flex-end;
    
66.                 width: ${this.pinpu.width}px;
    
67.                 background: #${Math.random().toString(16).substr(-6)};
    
68.                 animation: up ${0.3 + Math.random() * 0.3}s -${Math.random()}s infinite alternate linear var(--state);
    
69.                 --height: ${this.pinpu.height / 2 + msort(ar)[key] * 1.2}px;
    
70.             `;
    
71.             this.wrap.appendChild(item);
    
72.         });
    
73.         this.click();
    
74.     }
    
75.     click() {
    
76.         this.wrap.onclick = () => this.aud.paused ? this.aud.play() : this.aud.pause();
    
77.     }
    
78. }
    
79. 
    
80. let pp = new Pinpu(mydiv);
    
81. pp.pinpu.num = 80;
    
82. pp.pinpu.width = 3;
    
83. pp.pinpu.height = 100;
    
84. pp.aud.src = 'https://music.163.com/song/media/outer/url?id=25707174';
    
85. pp.createPinpu();
    
86. 
    
87. aud.addEventListener('play', mState, false);
    
88. aud.addEventListener('pause', mState, false);
    
89. 
    
90. </script>

复制代码

马黑黑

79 - 84行：实例化频谱类

最简单的实例化可以是酱紫——

let pp = new Pinpu(mydiv);
pp.aud.src = 'https://music.163.com/song/media/outer/url?id=25707174';
pp.createPinpu();

就是，必须给宿主元素（mydiv或其他具有定位的元素）；必须给音频地址；必须创建频谱。

南无月

马黑黑 发表于 2023-7-16 21:25
79 - 84行：实例化频谱类

最简单的实例化可以是酱紫——

高级JS课程。。。

马黑黑

南无月 发表于 2023-7-16 21:37
高级JS课程。。。

南无月

马黑黑 发表于 2023-7-16 21:41

问一个好奇了很久的问题：
我们都抄你的代码……瞎改改就完事儿。。。。
你贴子里的代码是一个字母一个字母敲出来的对吧。。
像这样边想边敲，一个贴子要敲多久？

马黑黑

醉美水芙蓉 发表于 2023-7-16 21:49
老师我看到的是倒得！好像又跟以前一样的毛病，我忘记老师怎么把它整过来了？

可能低版本的浏览器不支持 flex 布局的简写属性，我现在分开写了，你再看看效果有没有改变。

马黑黑

南无月 发表于 2023-7-16 21:52
问一个好奇了很久的问题：
我们都抄你的代码……瞎改改就完事儿。。。。
你贴子里的代码是一个字母一个 ...

就像玩呼啦圈，不会玩的，怎么弄都转不起来，会的，你说会怎么样

红影

这个就是两头大中间小的具体应用吧。真漂亮的频谱。频谱的新做法
只是频谱的底部横线怎么是动的，这个不是应该固定只有线条动的么？

马黑黑

红影 发表于 2023-7-16 21:59
这个就是两头大中间小的具体应用吧。真漂亮的频谱。频谱的新做法
只是频谱的底部横线怎么是动的 ...

你刷新看看

红影

马黑黑 发表于 2023-7-16 22:00
你刷新看看

现在好了。黑黑真棒

马黑黑

红影 发表于 2023-7-16 23:46
现在好了。黑黑真棒

不过flex至今手机端的支持还是不太理想，所以又改进了一下，另一个版本没事了，只是有些算法还需要研究一下

樵歌

有这个类，你的乖徒儿们又把你前面的黑科技综合应用，派生新的美篇

马黑黑

醉美水芙蓉 发表于 2023-7-17 07:23
老师早上好！手机浏览正常了！

不过这个版本由于用到 flex 布局，兼容性还不是很好。我准备推出第三个版本，通用版。

马黑黑

樵歌 发表于 2023-7-17 07:00
有这个类，你的乖徒儿们又把你前面的黑科技综合应用，派生新的美篇

不过，类不是最理想的，这个机制，可以不用类

红影

马黑黑 发表于 2023-7-16 23:56
不过flex至今手机端的支持还是不太理想，所以又改进了一下，另一个版本没事了，只是有些算法还需要研究一 ...

黑黑真仔细，考虑得很周全

马黑黑

红影 发表于 2023-7-17 10:40
黑黑真仔细，考虑得很周全

flex布局比grid布局出来早，奇怪的是，浏览器内核对它的支撑反而偏低，低版本内核的手机浏览器，竟然还不支持简写属性和简写值

南无月

马黑黑 发表于 2023-7-16 21:58
就像玩呼啦圈，不会玩的，怎么弄都转不起来，会的，你说会怎么样

会转的。呼啦圈会快的飞起来。。