带白帽子的小频谱
本帖最后由 马黑黑 于 2022-6-3 12:07 编辑 <br /><br /><style>.outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: linear-gradient(rgba(170,26,210,.75),rgba(25,175,100,.65)); }
.mama { left: 20px; top: 20px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right 1px; position: relative; }
.mama meter { width: 120px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -8px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
@keyframes up { from { top: -6px;} to { top: -16px; } }
</style>
<div class="outer">
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1374469502.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(20, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
})
</script>
本帖最后由 马黑黑 于 2022-6-3 12:07 编辑
<style>
.outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: linear-gradient(rgba(170,26,210,.75),rgba(25,175,100,.65)); }
.mama { left: 20px; top: 20px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right 1px; position: relative; }
.mama meter { width: 120px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -8px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
@keyframes up { from { top: -6px;} to { top: -16px; } }
</style>
<div class="outer">
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1374469502.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(20, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
})
</script>
黑黑真的用纯代码弄出了带白帽的小频谱，真棒{:4_199:} 这个还是透明的，真漂亮。{:4_199:} 有没有办法让频谱拉开点距离，不要挨得这么紧呢？那样就跟小辣椒的那个动图一样了呢。 黑黑厉害，简直是无所不能{:4_199:} 黑黑，你真的万能了{:4_187:} 可惜今天端午节家里人放假，我不能玩{:4_201:} 小辣椒 发表于 2022-6-3 12:00
可惜今天端午节家里人放假，我不能玩
城管多了{:4_170:} 小辣椒 发表于 2022-6-3 11:59
黑黑，你真的万能了
哪里哪里？再怎么着也只是一两下子而已，不是万能 红影 发表于 2022-6-3 11:37
黑黑厉害，简直是无所不能
言重了，哪有什么无所不能 马黑黑 发表于 2022-6-3 12:03
城管多了
就是，哎。。。。。 马黑黑 发表于 2022-6-3 12:04
哪里哪里？再怎么着也只是一两下子而已，不是万能
太佩服了{:4_187:} 红影 发表于 2022-6-3 11:37
有没有办法让频谱拉开点距离，不要挨得这么紧呢？那样就跟小辣椒的那个动图一样了呢。
这个简单呀。给 .wrap span 设置一个 margin-right 值，比如 margin-right : 2px; 就可以的，不过其他东东的尺寸要重新设定一下 加林森 发表于 2022-6-3 11:36
这个还是透明的，真漂亮。
没有透明吧 小辣椒 发表于 2022-6-3 12:06
太佩服了
{:5_108:} 马黑黑 发表于 2022-6-3 12:08
{:4_180:}
喝茶 小辣椒 发表于 2022-6-3 12:09
喝茶
谢谢 马黑黑 发表于 2022-6-3 12:10
谢谢
黑黑，你脑子里藏的东西真多 红影 发表于 2022-6-3 11:37
有没有办法让频谱拉开点距离，不要挨得这么紧呢？那样就跟小辣椒的那个动图一样了呢。
或者直接拉开距离便可：
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
…………
乘以 x 之后再加上 2px:
left: calc(var(--ww) * 2 + 2px);