小辣椒 发表于 2022-12-8 20:47

花心【Hana】（测试黑黑获取本地音频波形数据）

<style>
#papa { margin: 120 0 0 calc(50% - 660px); width: 1280px; height: 650px;left: -340px;top:120px; background: gray url('https://pic.imgdb.cn/item/6391db2db1fccdcd3629fcfc.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::before { position: absolute; content: ''; width: 100%; height: 3px; background: pink; top: -4px; }
.tit { position: absolute; top: 100px; font: bold 2em 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">花心【Hana】</div>
      <div id="mplayer"></div>
      <audio id="aud" src="https://yinhua.ru/20221125/yy/Hana .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>
<br><br><br><br><br>

小辣椒 发表于 2022-12-8 20:49

成功~~非常好用，谢谢黑黑@马黑黑

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

今天晚上是测试一下，秒制作，没有加特效，频谱可以出来已经很开心了{:4_173:}

小辣椒 发表于 2022-12-8 20:52

测试的是慢节奏的音乐，所以频谱这个效果很满意了，频谱颜色和宽度以后自己再修改

小辣椒 发表于 2022-12-8 20:57

小风你这个试试在线修改@风中飞尘

小辣椒 发表于 2022-12-8 21:13

小风说看见的效果和我不一样{:4_203:}

小辣椒 发表于 2022-12-8 21:20


https://pic.imgdb.cn/item/6391e475b1fccdcd363d44d8.jpg

我自己看见这样的

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

奇怪，我看见的和你的不一样呢{:4_173:}

小辣椒 发表于 2022-12-8 21:31

进来的人说说看见是倒的吗？小风说我频谱倒了{:4_198:}

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

祝贺亲爱的做成了，这个真漂亮{:4_187:}

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

小辣椒 发表于 2022-12-8 20:49
成功~~非常好用，谢谢黑黑@马黑黑

{:4_190:}

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

小辣椒 发表于 2022-12-8 21:31
进来的人说说看见是倒的吗？小风说我频谱倒了

我看到的是频谱向下的。

马黑黑 发表于 2022-12-8 21:36

小辣椒 发表于 2022-12-8 20:57
小风你这个试试在线修改@风中飞尘

{:4_173:}

马黑黑 发表于 2022-12-8 21:37

小辣椒 发表于 2022-12-8 21:31
进来的人说说看见是倒的吗？小风说我频谱倒了

手机会倒的。CSS里，after改为before也许行

小辣椒 发表于 2022-12-8 21:38

马黑黑 发表于 2022-12-8 21:37
手机会倒的。CSS里，after改为before也许行

问题我现在看见是正的啊

马黑黑 发表于 2022-12-8 21:39

小辣椒 发表于 2022-12-8 21:38
问题我现在看见是正的啊

这是浏览器版本问题吧

小辣椒 发表于 2022-12-8 21:42

马黑黑 发表于 2022-12-8 21:37
手机会倒的。CSS里，after改为before也许行

黑黑我现在改了你看看

马黑黑 发表于 2022-12-8 21:43

小辣椒 发表于 2022-12-8 21:42
黑黑我现在改了你看看

我电脑看都是正常的

小辣椒 发表于 2022-12-8 21:48

马黑黑 发表于 2022-12-8 21:43
我电脑看都是正常的

我也是的，奇怪了，怎么有人看见说倒的，那个亚伦的我看见是倒的，亚伦说他正的

马黑黑 发表于 2022-12-8 21:52

小辣椒 发表于 2022-12-8 21:48
我也是的，奇怪了，怎么有人看见说倒的，那个亚伦的我看见是倒的，亚伦说他正的
我想起来了：#mplayer 用了弹性布局，改为网格布局就好——

#mplayer { position: absolute; width: 60%; height: 160px; bottom: 0; display: flex; place-items: end; }

改为
#mplayer { position: absolute; width: 60%; height: 160px; bottom: 0; display: grid; place-items: end; }
页: [1] 2
查看完整版本: 花心【Hana】（测试黑黑获取本地音频波形数据）