复活了一个可视化频谱
昨晚突发奇想,想在网页上做一个频谱背景图,可是找了半天,这块区域好像资源匮乏,只找到一个,还是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>
代码都贴上了,有爱自取。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
暂无评论数据