柱状波形audio播放控制器

马黑黑

马黑黑

参考代码：

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

复制代码

马黑黑

代码解释：

一、CSS

.wrap 选择器用于归拢与规范子元素布排行为。弹性布局（flex）能极好规划子元素，align-items: flex-end; 规定了子元素在Y轴上处于最底部，起到固定和约束柱状子元素的作用。-webkit-box-reflect: right; 是镜像复制，在右边将自己反向映射，从而波形动态图形可增加一倍，但右边的另一半并没有交互操作。

.wrap span 选择器定义了将由JS生成的span标签的样式：尺寸、初始背景色、呈现（display）方式、定位（要用relative，用absolute会重叠在一起）等。

二、HTML

<div class="wrap">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1940059510.mp3" autoplay="autoplay" loop="loop"></audio>
</div>


未追加span标签前其实是一层结构，我把audio标签也放在了这里，变成了二层结构（这也是它将来的结构）。audio标签放在 wrap 里面不是一个聪明的主意，除非无需audio播放器的界面！

四、JS

基本以函数式编程的方式完成交互功能，且全部使用箭头函数来编写代码。代码实际上并不抽象，但对没有JS基础的小盆友来说是天书。这里只说说如何调整一些必要的参数。

① 柱状的杆子数量：修改关键字 {length: 10} 中的 10 即可。若做修改，CSS中的 wrap 选择器的宽度改为 x * 6 得出的数值（x为修改的数，6是柱状杆个体的宽度）；

② 柱状高低变化幅度：ele.style.height = num(20, 60) + 'px';

原始代码中，从 20 到 60 的变化，可修改，接受的值是 0 至 无限 的整数。若修改，请保证呈现场所与之没有高度冲突。

加林森

老黑这个讲解真给力，说得很清楚的。我去学习制作一个出来看效果。

马黑黑

加林森 发表于 2022-5-29 10:01
老黑这个讲解真给力，说得很清楚的。我去学习制作一个出来看效果。

这个看着挺顺眼的吧，就是功能不多

加林森

马黑黑 发表于 2022-5-29 10:15
这个看着挺顺眼的吧，就是功能不多

只要有音乐出来就很给力的。我已经制作出来了，老黑请你去看看。谢谢！

马黑黑

加林森 发表于 2022-5-29 10:27
只要有音乐出来就很给力的。我已经制作出来了，老黑请你去看看。谢谢！

看到了，你用的是最初的测试版，初音那个，地盘不固定，也很漂亮

加林森

马黑黑 发表于 2022-5-29 10:36
看到了，你用的是最初的测试版，初音那个，地盘不固定，也很漂亮

是的，我又制作了另外一个。试验两个就行了。

马黑黑

加林森 发表于 2022-5-29 10:54
是的，我又制作了另外一个。试验两个就行了。

挺好的

加林森

马黑黑 发表于 2022-5-29 11:12
挺好的

嗯嗯，我准备去修改一下柱型了。

马黑黑

加林森 发表于 2022-5-29 11:17
嗯嗯，我准备去修改一下柱型了。

要的要的

加林森

马黑黑 发表于 2022-5-29 11:26
要的要的

我已经修改了一个，就是那个DJ小鱼儿 - 她会魔法吧。

马黑黑

醉美水芙蓉 发表于 2022-5-29 11:36
怎么加歌词同步呢？

这个没有歌词同步，需要的话可以考虑将我之前的歌词同步弄进来

马黑黑

加林森 发表于 2022-5-29 11:34
我已经修改了一个，就是那个DJ小鱼儿 - 她会魔法吧。

挺好

加林森

马黑黑 发表于 2022-5-29 12:19
挺好

这个也修改了，又制作了一个出来。

梦油

随着音乐而动，好棒！

红影

马黑黑 发表于 2022-5-29 10:36
看到了，你用的是最初的测试版，初音那个，地盘不固定，也很漂亮

原来是这样，我说前面那个帖子底下为什么是会跟着动的

马黑黑

红影 发表于 2022-5-29 14:13
原来是这样，我说前面那个帖子底下为什么是会跟着动的

有一点点跳动，也挺不错