目录
平台：steam | wallpaper engine
相关链接：
创建网页壁纸
Web wallpaper用户自定义属性
实现音频响应
创建音频侦听器
音频音量级别数据
启用音频响应：
实现思路：
完整实例（复制即可用）
创建音频侦听器
首先我们要创建一个函数。该函数有一个参数。例如：function wallpaperAudioListener ( audioArray ) { };
wallpaper engine 提供一个函数：window.wallpaperRegisterAudioListener 用来注册监听事件。
wallpaper engine 会调用 window.wallpaperRegisterAudioListener 注册的监听事件，并传入一个参数，参数为当前音频音量级别。
function wallpaperAudioListener(audioArray) { // Handle audio input here}window.onload = function() { window.wallpaperRegisterAudioListener(wallpaperAudioListener);}; 音频音量级别数据音频数据：数组元素0 直到 63包含左侧通道的音量级别。数组元素64 直到 127包含右通道的音量级别。数组中一共128个元素。每个数组通常包含从 0.00 到 1.00 的浮点值。0.00 表示特定频率当前未播放任何声音，1.00 表示频率以最大音量播放。
补充一点：理论上来是0-1的值，但是声音经过不同驱动或者程序处理之后就会发生变化。例如音乐播放器的音效和耳机的驱动等，都会让数值大于1，甚至会到10，或者会出现整体都很小的情况，例如整体都趋近小于0.001。
需要在project.json中通过一个标识符来开启音频响应。这个表示符就是： "supportsaudioprocessing" : true
在新版本的wallpaper engine好像不需要手动去添加上这个标识符。
下图示例：
{"file" : "index.html","general" : {"properties" : {"schemecolor" : {"order" : 0,"text" : "ui_browse_properties_scheme_color","type" : "color","value" : "0 0 0"}},"supportsaudioprocessing" : true},"title" : "test","type" : "Web"} 实现思路： 通过window.wallpaperRegisterAudioListener 注册指定的方法处理获取数据。数据通常为0.0-1.0的浮点数据数组。根据浮点数组的数据，计算音频响应线条的数据：高度，宽度，间距等等。通过canvas绘制出来即可完整实例（复制即可用）采用ES6语法实现。
自行了解：window.requestAnimationFrame方法
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> body { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } #audio-canvas { height: 100vh; width: 100vw; position: absolute; /*！！！底部任务栏！！！这个属性应该交给用户去指定*/ bottom: 35px; } </style> <title>Test</title></head><body><canvas id="audio-canvas"></canvas><script> let audioCanvas; window.onload = function () { //实例化对象 audioCanvas = new AudioCanvas(); //判断是否有wallpaperRegisterAudioListener if (window.wallpaperRegisterAudioListener) { //注册事件 window.wallpaperRegisterAudioListener(function (date) { audioCanvas.dataProcessing(date); }); //开始绘制 audioCanvas.draw(); } } class AudioCanvas { /** * 画板 */ audioCanvas; /** * 画布 */ audioCanvasCtx; /** * 画布宽度 */ audioCanvasCtxWidth; /** * 音频数据 */ audioArray = []; /** * 间距 */ spacing = 6; /** * 线的宽度 */ lineWidth; /** * 总数 */ amount; /** * 颜色 */ color; /** * 构造方法初始化 */ constructor() { this.audioCanvas = document.getElementById('audio-canvas'); //必须通过属性设置宽高，不能通过CSS属性！会有问题呢 this.audioCanvas.height = window.innerHeight; this.audioCanvas.width = window.innerWidth; this.audioCanvasCtxWidth = window.innerWidth; this.audioCanvasCtx = this.audioCanvas.getContext('2d'); this.color = 'rgb(255,0,0)'; } /** *数据处理，负责处理数据。例如线的宽度，总数，以及线幅度数据。 * @param array */ dataProcessing(array) { //总数 this.amount = array.length; //音频数据：数组元素0 直到 63包含左侧通道的音量级别。数组元素64 直到 127包含右通道的音量级别。数组中一共128个元素 //每个数组通常包含从 0.00 到 1.00 的浮点值。0.00 表示特定频率当前未播放任何声音，1.00 表示频率以最大音量播放。 for (let i = 0; i < this.amount; i++) { //补充一点。理论上来是0-1的值，但是声音经过不同驱动或者程序处理之后就会发生变化， // 例如音乐播放器的音效和耳机的驱动等，都会让数值大于1，甚至会到10，或者会出现整体都很小的情况，例如整体都趋近小于0.001 //array[i] *=10; //这里根据需要，写一个算法自动的缩放合适的倍数即可。 //大于一的设置为1 (array[i] > 1) && (array[i] = 1); //最终高度 = 幅度 * 画板高度; array[i] *= this.audioCanvas.height; } this.audioArray = array; //线的宽度 = （画板宽度 - （ 间距 * 总数 ）） / 总数 ; this.lineWidth = (this.audioCanvasCtxWidth - (this.spacing * this.amount)) / this.amount; } /** * 绘制 * 此方法只关注绘制，直接将数据绘制出来 */ draw() { let t = this; //清空画板 this.audioCanvasCtx.fillStyle = 'rgb(255,255,255)'; this.audioCanvasCtx.fillRect(0, 0, this.audioCanvas.width, this.audioCanvas.height); //画笔颜色 this.audioCanvasCtx.fillStyle = this.color; //循环绘制 for (var i = 0; i < this.amount; ++i) { this.audioCanvasCtx.fillRect((this.lineWidth + this.spacing) * i, this.audioCanvas.height - this.audioArray[i], this.lineWidth, this.audioArray[i]); } //窗口绘制 window.requestAnimationFrame(function () { t.draw(); }); } }</script></body></html>