醉美水芙蓉 发表于 2022-12-8 21:42

测试频谱----我的热情输给你的冷血

本帖最后由 醉美水芙蓉 于 2022-12-9 21:08 编辑 <br /><br /><style>
#papa { margin: 120 0 0 calc(50% - 660px);   left: -340px;width: 1280px; height: 650px;top:120px; background: gray url('https://pic.imgdb.cn/item/6391e77ab1fccdcd364362a6.jpg') 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: 100%; height: 160px; bottom: 0; display: flex; justify-content: center; align-items: flex-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; left: 20px; 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">我的热情输给你的冷血</div>
      <div id="mplayer"></div>
      <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=247773936&.mp3" loop autoplay></audio>
</div>

<script>
(function() {
      ypData = ;
      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 >= ypData.length) cNum = 0;
                setPinpu(cNum);
      });

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

})();
</script>

红影 发表于 2022-12-8 21:44

真漂亮，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2022-12-8 22:09

红影 发表于 2022-12-8 21:44
真漂亮，欣赏水芙蓉好帖

谢谢红影美女支持！

小辣椒 发表于 2022-12-8 22:27

欣赏水芙蓉的漂亮频谱，不能加分哦

醉美水芙蓉 发表于 2022-12-8 23:05

小辣椒 发表于 2022-12-8 22:27
欣赏水芙蓉的漂亮频谱，不能加分哦

谢谢辣椒美女支持！这个播放器还有点问题！

风中飞尘 发表于 2022-12-8 23:20

https://mp3.wf/view.php/afd4e9896b0b209dfd433ff4dcd199e8.png 好看

醉美水芙蓉 发表于 2022-12-9 07:01

风中飞尘 发表于 2022-12-8 23:20
好看

谢谢风中飞尘老师光临，播放器还是有点问题！电脑看倒的，手机看正常！

亚伦影音工作室 发表于 2022-12-9 10:12

手机看也是倒的！

樵歌 发表于 2022-12-9 10:16

好看极了!我看到是倒立的。也不能评分{:4_187:}

红影 发表于 2022-12-9 10:48

醉美水芙蓉 发表于 2022-12-8 22:09
谢谢红影美女支持！

我这里看到的频谱是倒的呢。

醉美水芙蓉 发表于 2022-12-9 11:41

亚伦影音工作室 发表于 2022-12-9 10:12
手机看也是倒的！

还是有问题的！

醉美水芙蓉 发表于 2022-12-9 11:41

红影 发表于 2022-12-9 10:48
我这里看到的频谱是倒的呢。

嗯！有问题！

醉美水芙蓉 发表于 2022-12-9 11:42

樵歌 发表于 2022-12-9 10:16
好看极了!我看到是倒立的。也不能评分

樵歌中午好！频谱有点问题！

红影 发表于 2022-12-9 16:35

醉美水芙蓉 发表于 2022-12-9 11:41
嗯！有问题！

黑黑发了个最新的音频可视的封装，这些问题都不存在了{:4_204:}

辫子哥哥 发表于 2022-12-9 17:01

美女制作很漂亮，不能加分{:4_187:}

醉美水芙蓉 发表于 2022-12-9 17:29

红影 发表于 2022-12-9 16:35
黑黑发了个最新的音频可视的封装，这些问题都不存在了

谢谢红影美女告知！

醉美水芙蓉 发表于 2022-12-9 17:31

辫子哥哥 发表于 2022-12-9 17:01
美女制作很漂亮，不能加分

谢谢辫子版主光临，这个频谱有点问题！

梦缘 发表于 2022-12-9 20:32

好听的歌曲，欣赏问好老师！{:4_179:}

醉美水芙蓉 发表于 2022-12-9 20:43

梦缘 发表于 2022-12-9 20:32
好听的歌曲，欣赏问好老师！

谢谢老师支持！

小辣椒 发表于 2022-12-9 20:50

醉美水芙蓉 发表于 2022-12-9 17:31
谢谢辫子版主光临，这个频谱有点问题！
水芙蓉晚上好，我电脑看见都是频谱是正的，但昨天别人说我反的，后来去修改了黑黑老师修改的语句，别人说正的了，你可以去我帖里面看看，黑黑老师修改语句，就换一句了可以了，我自己看见都正的。
页: [1] 2
查看完整版本: 测试频谱----我的热情输给你的冷血