木灵鱼儿

木灵鱼儿

阅读:957

最后更新:2020/07/18/ 17:33:27

复活了一个可视化频谱

昨晚突发奇想,想在网页上做一个频谱背景图,可是找了半天,这块区域好像资源匮乏,只找到一个,还是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
文章被阅读 957

相关文章

目录树