更新于
复活了一个网页频谱背景图-可视化频谱
发布于 / 分类: 网站源码 / 仅有1条评论 / 阅读量: 12013官方的demo有问题,因为three.js已经更新很多代了,个人测试找到一个能用的旧版本,用法就用了官方提供的umd这种传统方式,能用,也就是仅仅能用吧,有兴趣可以了解下。
github地址
代码如下
<div id="bg" style="height:100vh;"></div>
<canvas id="app" style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;opacity: .3;">
<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>
代码都贴上了,有爱自取。
awfvgdetht
来自 Windows10-Chrome 的网友发布于 1568 天前