audio频谱按钮（有进度条）

马黑黑

马黑黑

1. <style>
   
2. .mama { left: 20px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
   
3. .wrap { width: 60px; height: 60px;  box-reflect: right; -webkit-box-reflect: right; position: relative; }
   
4. .mama meter { width: 120px; height: 20px; position: relative; }
   
5. .wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -6px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
   
6. .wrap span:nth-child(2) { left: var(--ww); }
   
7. .wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
   
8. .wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
   
9. .wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
   
10. .wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
    
11. .wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
    
12. .wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
    
13. .wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
    
14. .wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
    
15. </style>
    
16. 
    
17. <div class="mama">
    
18.         <div class="wrap"></div>
    
19.         <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
    
20.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33933040.mp3" autoplay="autoplay" loop="loop"></audio>
    
21. </div>
    
22. 
    
23. <script>
    
24. 
    
25. let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
    
26. let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
    
27. 
    
28. Array.from({length: 10}).forEach((ele) => {
    
29.         ele = document.createElement('span');
    
30.         ele.className = 'sskey';
    
31.         ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
    
32.         wrap.appendChild(ele);
    
33. })
    
34. 
    
35. let sskey = document.querySelectorAll('.sskey');
    
36. 
    
37. mama.onclick = () => aud.paused ? aud.play() : aud.pause();
    
38. 
    
39. aud.addEventListener('timeupdate', () => {
    
40.         Array.from(sskey).forEach((ele) => {
    
41.                 ele.style.height = num(20, 60) + 'px';
    
42.         })
    
43.         meter.value = prog(aud.duration, aud.currentTime);
    
44. })
    
45. 
    
46. </script>

复制代码

小辣椒

黑黑这个按钮漂亮，小频谱的

马黑黑

小辣椒 发表于 2022-5-29 14:34
黑黑这个按钮漂亮，小频谱的

作为按钮是不是大了点

小辣椒

是大了一点

马黑黑

小辣椒 发表于 2022-5-29 14:38
是大了一点

其实也可以调整，CSS里的尺寸配套就行，JS也有需要配套的

小辣椒

下面那白的进度条可以再短一点吗

小辣椒

进度条在细巧一点，更加漂亮

千羽

黑黑老师的这按钮漂亮

红影

这个更加完美了，连进度也有了

加林森

漂亮的进度条。共10条。老黑厉害！

马黑黑

小辣椒 发表于 2022-5-29 14:41
下面那白的进度条可以再短一点吗

可以，它的CSS样式由 .wrap meter 控制

马黑黑

加林森 发表于 2022-5-29 17:04
漂亮的进度条。共10条。老黑厉害！

进度条只有一条，频谱有20条

加林森

马黑黑 发表于 2022-5-29 17:32
进度条只有一条，频谱有20条

哦，我怎么放不进图片里面呢？烧脑~~~~~~~~~~~~~

马黑黑

加林森 发表于 2022-5-29 17:33
哦，我怎么放不进图片里面呢？烧脑~~~~~~~~~~~~~

你把下面这个HTML代码，

<div class="mama">
        <div class="wrap"></div>
        <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33933040.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

当成是A，那么：

<div .....>
你的帖子代码
A
你的帖子其他代码
</div>

加林森

马黑黑 发表于 2022-5-29 17:36
你把下面这个HTML代码，

好的好的，谢谢老黑。我等就去试一试。

马黑黑

加林森 发表于 2022-5-29 17:38
好的好的，谢谢老黑。我等就去试一试。

把HTML部分当做一个单位，然后完整放在你帖子的父容器里面，适当定位

加林森

马黑黑 发表于 2022-5-29 17:41
把HTML部分当做一个单位，然后完整放在你帖子的父容器里面，适当定位

嗯嗯。

马黑黑

小辣椒 发表于 2022-5-29 14:43
进度条在细巧一点，更加漂亮

这都可以弄的，一切在CSS里