【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文件，下面是基本框架

[JavaScript] 纯文本查看 复制代码

function setup() {
    createCanvas(windowWidth, windowHeight);

    window.wallpaperRegisterAudioListener(draw);		//必须要有
}

function draw(audioArray) {		//audioArray是数组，相当于fft音频分析功能
    background(0,0,0);

    ellipse(width/2, height/2, audioArray[1]*666, audioArray[1]*666);		
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

只需要使用audioArray[1]数组即可（其中1可以替换成其他数字，数字小代表低音和数字高代表重音）
这个数组就是能够监听音频变化，数组当作是一个跟随音乐变化的动态数字
我们把这个动态数字带入到对象参数中，对象就会跟着音乐运动，这就是音频可视化的原理


p5.js网页插件官网教程
https://p5js.org/
感兴趣的朋友可以到
openprocessing.org
随便找个作品进行二次创作
结合音频可视化，会得到意想不到的效果


附件中p5wall.js是一个小案例，直接在wallpaper打开使用即可
想自己写的话，把模板.js复制一份，进行添加自己的代码即可

oookim

不明觉厉系列

upliang

支持,加油

小山宇

不明觉厉系列 js不太懂

QuTengFei

学习了，大佬