A WEBGL Audio Spectrum Music Visualizer.
- webpack
npm install azusa --saveimport Azusa from 'azusa'
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);
})<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>