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

复活了一个可视化频谱

木灵鱼儿

298 天前HTML

718 0 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>

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