【p5.js】wallpaper engine音频可视化壁纸制作教程
wallpaper engine壁纸有两个版本
steam版本
wegame版本
本教程使用p5.js的网页技术，两个版本都可以使用
其他web语言可以参考官网教程进行改版
https://docs.wallpaperengine.io/en/web/audio/visualizer.html
附件包含4个文件
1.index.html（必备：前端显示效果）
2.p5.min.js（必备：插件）
3.project.json（必备：让网页默认监听系统声音）
4.p5wall.js（必备：音频可视化动画）
前三个文件不用改
第四个就是音频可视化的DIY文件，下面是基本框架
function setup() {
createCanvas(windowWidth, windowHeight);
window.wallpaperRegisterAudioListener(draw); //必须要有
}
function draw(audioArray) { //audioArray是数组，相当于fft音频分析功能
background(0,0,0);
ellipse(width/2, height/2, audioArray*666, audioArray*666);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
只需要使用audioArray数组即可（其中1可以替换成其他数字，数字小代表低音和数字高代表重音）
这个数组就是能够监听音频变化，数组当作是一个跟随音乐变化的动态数字
我们把这个动态数字带入到对象参数中，对象就会跟着音乐运动，这就是音频可视化的原理
p5.js网页插件官网教程
https://p5js.org/
感兴趣的朋友可以到
openprocessing.org
随便找个作品进行二次创作
结合音频可视化，会得到意想不到的效果
附件中p5wall.js是一个小案例，直接在wallpaper打开使用即可
想自己写的话，把模板.js复制一份，进行添加自己的代码即可
不明觉厉系列 支持,加油 不明觉厉系列 js不太懂 学习了，大佬
页:
[1]