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

马黑黑 发表于 2023-7-17 09:01

红影发表于 2023-7-17 09:51

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

马黑黑 发表于 2023-7-17 09:02

代码分享
<style>
#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: linear-gradient(to top right,rgba(200,0,0,.7),rgba(0,100,100,.75));
overflow: hidden;
position: relative;
--state: paused;
}
pinpu-wrapper {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
cursor: pointer;
}
pin-pu {
position: absolute;
bottom: 0;
animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state);
}
.leaf {
position: absolute;
width: 50px;
height: 50px;
top: -100px;
border-radius: 0% 100%;
background: linear-gradient(45deg, green, lightgreen);
animation: drop 6s var(--delay) infinite linear var(--state);
--delay: 0s;
}
.leaf:nth-of-type(2) { --delay: -2s; }
.leaf:nth-of-type(3) { --delay: -4s; }
@keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
@keyframes drop { to { transform: rotate(-10deg) translateY(760px); } }
</style>

<div id="mydiv">
<pinpu-wrapper></pinpu-wrapper>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1805728327" autoplay loop></audio>

<script>

!function() {
let pinpuNum = 60, pinpuWidth = 4, pinpuHeight = 160;
let ppwrap = document.querySelector('pinpu-wrapper');

let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');

let msort = (ar) => {
   let newAr = [];
   ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
   return newAr;
}

!function() {
   let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);
   Array.from({length: pinpuNum}).forEach((item,key) => {
         item = document.createElement('pin-pu');
         item.style.cssText += `
            width: ${pinpuWidth}px;
            left: ${(pinpuWidth + 2) * key}px;
            background: #${Math.random().toString(16).substr(-6)};
            --height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)}px;
            --du: ${Math.random() * .3 + .3}s;
            --delay: -${Math.random()}s;
         `;
         ppwrap.appendChild(item);
   });
   ppwrap.style.height = `${pinpuHeight}px`;
   ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;
}();

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
}();

</script>

马黑黑 发表于 2023-7-17 09:06

本帖最后由马黑黑于 2023-7-17 09:13 编辑

第 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 的数值；
红色代码，是为了令频谱在父元素中水平居中。

马黑黑 发表于 2023-7-17 09:08

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

马黑黑 发表于 2023-7-17 09:19

若需要改变频谱的速率，修改第 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:56

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

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

红影发表于 2023-7-17 10:03

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

!function() 加个感叹号的好像不多见。{:4_203:}

红影发表于 2023-7-17 10:14

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

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

马黑黑 发表于 2023-7-17 10:30

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

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

马黑黑 发表于 2023-7-17 10:32

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

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

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

红影发表于 2023-7-17 10:57

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

我比较不出来差异啊{:4_173:}

红影发表于 2023-7-17 11:02

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

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

马黑黑 发表于 2023-7-17 12:00

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

玩玩而已

马黑黑 发表于 2023-7-17 12:01

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

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

醉美水芙蓉 发表于 2023-7-17 12:04

马黑黑 发表于 2023-7-17 12:13

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

可能正在赶工{:4_170:}

小辣椒 发表于 2023-7-17 12:41

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

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

小辣椒 发表于 2023-7-17 12:42

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

那些有频谱的节奏感

马黑黑 发表于 2023-7-17 12:49

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

那是自然的

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

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