Inori-Lover/Azusa

A WEBGL Audio Spectrum Music Visualizer.

Azusa

A WEBGL Audio Spectrum Music Visualizer.

How to use

• webpack

  npm install azusa --save
  

  import Azusa from 'azusa'
  

example

typescript from src

const azusa = new Azusa({
  view: document.getElementById('app') as HTMLCanvasElement,
  subdivisionSize: 1024,
  cutEnd: 256
});

azusa.audio.load({
  src: testSound,
  onLoad: (buffer: THREE.AudioBuffer) => {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  onPrgress: (xhr: ProgressEvent) => {},
  onError: () => {}
});

azusa.audio.Volume = 0.5;

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

umd

<div id="bg"></div>
<canvas id="app"></canvas>

<script src="https://cdn.jsdelivr.net/npm/three"></script>
<script src="./lib/azusa.min.js"></script>
<script>

  const azusa = new Azusa({
    view: document.getElementById('app'),
    subdivisionSize: 1024,
    cutEnd: 256
  });

  azusa.audio.load({
    src: './example/media/cha.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(./example/media/9s.jpg)")

</script>

Click here to demo