复活了一个可视化频谱

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

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

文章分类