论坛 › 欢乐水吧 › 柱状波形audio播放控制器

马黑黑 发表于 2022-5-29 09:07

柱状波形audio播放控制器

<style>
.wrap {
        display: flex;
        align-items: flex-end;
        left: 20px;
        top: 20px;
        width: 60px;
        height: 60px;
        -webkit-box-reflect: right;
        cursor: pointer; position: absolute;
        position: relative;
}
.wrap span {
        width: 6px;
        height: 20px;
        background-color: rgba(255,0,0,.6);
        display: inline-block;
}
</style>

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

<script>
let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

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');

wrap.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        Array.from(sskey).forEach((ele) => {
                ele.style.height = num(20, 60) + 'px';
        });
});
</script>

马黑黑 发表于 2022-5-29 09:09

本帖最后由 马黑黑 于 2022-5-29 09:42 编辑

参考代码：
<style>
.wrap {
      display: flex;
      align-items: flex-end;
      left: 20px;
      top: 20px;
      width: 60px;
      height: 60px;
      -webkit-box-reflect: right;
      cursor: pointer;
      position: relative;
}
.wrap span {
      width: 6px;
      height: 20px;
      background-color: rgba(255,0,0,.6);
      display: inline-block;
}
</style>

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

<script>
let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

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');

wrap.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
      Array.from(sskey).forEach((ele) => {
                ele.style.height = num(20, 60) + 'px';
      });
});
</script>

马黑黑 发表于 2022-5-29 09:09

本帖最后由 马黑黑 于 2022-5-29 09:47 编辑

代码解释：

一、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

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

马黑黑 发表于 2022-5-29 10:15

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

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

加林森 发表于 2022-5-29 10:27

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

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

马黑黑 发表于 2022-5-29 10:36

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

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

加林森 发表于 2022-5-29 10:54

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

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

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

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

挺好的

加林森 发表于 2022-5-29 11:17

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

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

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

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

要的要的

醉美水芙蓉 发表于 2022-5-29 11:34

加林森 发表于 2022-5-29 11:34

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

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

醉美水芙蓉 发表于 2022-5-29 11:36

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

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

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

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

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

挺好

加林森 发表于 2022-5-29 12:34

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

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

梦油 发表于 2022-5-29 13:34

随着音乐而动，好棒！

红影 发表于 2022-5-29 14:13

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

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

马黑黑 发表于 2022-5-29 14:14

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

有一点点跳动，也挺不错

查看完整版本: 柱状波形audio播放控制器