• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

复活了一个可视化频谱

256 0

昨晚突发奇想,想在网页上做一个频谱背景图,可是找了半天,这块区域好像资源匮乏,只找到一个,还是2年前的一个项目,开源在github上,也没更新了。

github地址:Azusa

官方的demo有问题,因为three.js已经更新很多代了,个人测试找到一个能用的旧版本,用法就用了官方提供的umd这种传统方式,能用,也就是仅仅能用吧,有兴趣可以了解下。

<div id="bg" style="height:100vh;"></div>
  <canvas id="app" style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;opacity: .3;"></canvas>

  <script src="https://cdn.staticfile.org/three.js/80/three.js"></script>
  <script src="./js/azusa.js"></script>
  <script>
    const azusa = new Azusa({
      view: document.getElementById('app'),
      subdivisionSize: 1024,
      cutEnd: 256
    });

    azusa.audio.load({
      src: './769a_8a1c_233d_7882b88677cd069fd07dbb9581aeb5ce.mp3',
      onPrgress: (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      }
    });

    azusa.audio.setVolume(0.5);

    window.addEventListener('resize', () => {
      azusa.resize(window.innerWidth, window.innerHeight);
    })

    const container = document.getElementById('bg')
    container && (container.style.backgroundImage = "url('https://w.wallhaven.cc/full/2e/wallhaven-2em38y.jpg')")
  </script>

代码都贴上了,有爱自取。

0
  • 本文分类:HTML
  • 本文标签:可视化频谱
  • 流行热度:已超过 256 人围观了本文
  • 最后更新:2020年07月18日 - 17时33分27秒
  • 发布日期:2020年07月18日 - 17时32分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码