小辣椒 发表于 2022-12-7 20:11

傻得很潇洒(DJ版)（学习套用黑黑频谱播放器）

<br><br><br><br><br>
<style>
#papa { margin: 0 0 0 calc(50% - 660px); width: 1164px; height: 668px; background: gray url('https://wj.zp68.com/lxx/yunhua/2022/12/07/pp1.gif') no-repeat center/cover; box-shadow: 6px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
#mplayer { position: absolute; width: 60%; height: 160px; bottom: 0; display: flex; place-items: end; }
.mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 10px; background: gray linear-gradient(to top,darkgreen,green,lightgreen); transition: height .45s; }
.mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: pink; top: -4px; }
.tit { position: absolute; top: 100px; font: bold 3em sans-serif; color: hsla(90,50%,50%,.3); text-shadow: 1px 1px 2px #000, -5px -5px 10px snow, 5px 5px 10px snow; animation: flash 3s infinite alternate linear; }
@keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px darkgreen, 5px 5px 20px darkgreen; } }
</style>

<div id="papa">
      <div class="tit">傻得很潇洒(DJ版)</div>
      <div id="mplayer"></div>
      <audio id="aud" src="https://wj.zp68.com/lxx//yunhua/2022/12/07/audio.mp3" loop autoplay></audio>
</div>

<script>
(function() {
      let ybData = ;
      let total = Math.ceil(mplayer.offsetWidth / 6);
      let cNum = 0;
      for(j=0; j<total; j++) {
                let el = document.createElement('span');
                el.className = 'mLine';
                el.style.height = Math.floor(Math.random()* 100) + 'px';
                mplayer.appendChild(el);
      }
      let lines = document.querySelectorAll('.mLine');

      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      
      aud.addEventListener('timeupdate', () => {
                cNum ++;
                if(cNum >= ybData.length) cNum = 0;
                setPinpu(cNum);
      });

      function setPinpu(num) {
                let data = ybData;
                for(j=0; j<total; j++) {
                        lines.style.height = Math.floor(Math.random() * data / 1.5) + Math.floor(Math.random() *50) + 'px';
                }
      }

})();
</script>
<br><br>

小辣椒 发表于 2022-12-7 20:14

@马黑黑

黑黑我直接套用玩一个，频谱很漂亮，谢谢黑黑分享教程

小辣椒 发表于 2022-12-7 20:16

发现在自己电脑预览频谱高度还高一点，发论坛是黑黑的音乐波音了吧{:4_189:}

小辣椒 发表于 2022-12-7 20:17

反正这个效果已经很满意了{:4_170:}

梦油 发表于 2022-12-7 20:22

图美、歌好。赞！

辫子哥哥 发表于 2022-12-7 20:36

是作业吗？
我去找找代马总批改作业{:4_170:}

辫子哥哥 发表于 2022-12-7 20:38


辫子哥哥 发表于 2022-12-6 13:16
老师批作业的
100
   √

辫子哥哥 发表于 2022-12-7 20:38

@马黑黑

马总我代批作业了{:4_170:}

马黑黑 发表于 2022-12-7 20:41

辫子哥哥 发表于 2022-12-7 20:38
@马黑黑

马总我代批作业了

辛苦辛苦{:4_190:}

小辣椒 发表于 2022-12-7 20:42

辫子哥哥 发表于 2022-12-7 20:38
100
   √

{:4_170:}

小辣椒 发表于 2022-12-7 20:42

辫子哥哥 发表于 2022-12-7 20:36
是作业吗？
我去找找代马总批改作业

你真会诱惑，冒充黑黑

红影 发表于 2022-12-7 20:43

漂亮，亲爱的动图总是加得特别漂亮，这个频谱被亲爱的做得非常漂亮{:4_199:}

小辣椒 发表于 2022-12-7 20:48

红影 发表于 2022-12-7 20:43
漂亮，亲爱的动图总是加得特别漂亮，这个频谱被亲爱的做得非常漂亮

亲爱的，套用，很快的，以前的做过的图图，速度就出来了

红影 发表于 2022-12-7 22:50

小辣椒 发表于 2022-12-7 20:48
亲爱的，套用，很快的，以前的做过的图图，速度就出来了

不用去找那个声音数据的么？那个我还不知道怎么去找呢{:4_173:}

辫子哥哥 发表于 2022-12-8 14:15

小辣椒 发表于 2022-12-7 20:42


100应该最高，要不你让黑总在增加100{:4_170:}

辫子哥哥 发表于 2022-12-8 14:16

马黑黑 发表于 2022-12-7 20:41
辛苦辛苦

最好改200，好像小辣椒100嫌少

辫子哥哥 发表于 2022-12-8 14:17

我试一下

辫子哥哥 发表于 2022-12-6 13:16
老师批作业的
200
   √

辫子哥哥 发表于 2022-12-8 14:18

成功了，黑总@马黑黑

三月的阳光 发表于 2022-12-8 14:23

师傅也改风格了，喜欢节奏感强烈的DJ了~~{:4_205:}{:4_205:}

马黑黑 发表于 2022-12-8 14:35

辫子哥哥 发表于 2022-12-8 14:16
最好改200，好像小辣椒100嫌少

打200的是一千分制{:4_170:}
页: [1] 2
查看完整版本: 傻得很潇洒(DJ版)（学习套用黑黑频谱播放器）