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

audio频谱按钮（有进度条）

<style>
.mama { left: 20px; width: fit-content; height: fit-content; position: relative; cursor: pointer; }
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 20px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -6px; 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); }
</style>

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

<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-5-29 14:23

<style>
.mama { left: 20px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 20px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -6px; 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); }
</style>

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

<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-5-29 14:34

黑黑这个按钮漂亮，小频谱的{:4_178:}

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

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

作为按钮是不是大了点{:4_170:}

小辣椒 发表于 2022-5-29 14:38

是大了一点{:4_173:}

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

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

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

小辣椒 发表于 2022-5-29 14:41

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

小辣椒 发表于 2022-5-29 14:43

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

千羽 发表于 2022-5-29 15:40

黑黑老师的这按钮漂亮{:4_187:}

红影 发表于 2022-5-29 15:50

这个更加完美了，连进度也有了{:4_199:}

醉美水芙蓉 发表于 2022-5-29 16:07

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

漂亮的进度条。共10条。老黑厉害！{:4_199:}

马黑黑 发表于 2022-5-29 17:30

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

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

马黑黑 发表于 2022-5-29 17:32

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

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

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

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

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

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

加林森 发表于 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:38

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




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

马黑黑 发表于 2022-5-29 17:41

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

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

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

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

嗯嗯。{:5_108:}

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

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

这都可以弄的，一切在CSS里
页: [1] 2 3
查看完整版本: audio频谱按钮（有进度条）