So unfortunately it won't be very easy to implement those custom effects to 'distort' the background image.... So I'm not sure if I will ever try to even get it to work, because I'm not convinced I could get it even to remotely what I would want it to look like....

as for the second part, since my wallpaper is a web-based wallpaper. it's using javascript to 'manipulate' the audio data. The basic logic for the audio handling is as follows:


1. Bind the Wallpaper Engine Audio data callback

```
window.wallpaperRegisterAudioListener((data) => {
handleWallpaperEngineAudioData(data);
});
```
2. Handle the Wallpaper Engine Audio data callback method
I use the createjs library for drawing to the HTML5 Canvas. And I also use there 'Tween' engine to 'smooth' the audio data out over a period of 50ms. Wallpaper Engine updates rougly between every 25-30 times a second the audio data (which would come down to 25-30fps of audio data = every 40-33ms), but by smoothing it out over 50ms I can draw way more frames per second and get a 'smooth' result

```
var transitionAudioData = [];
var handleWallpaperEngineAudioData = function (data) {

// If CreateJS is available, smooth the audio data over time
if (createjs && createjs.Tween) {
createjs.Tween.get(transitionAudioData, {
override: true
}).to(data, 50);
}
}
```

3. Function to retrieve the 'bass' multiplier. it by default takes samples from indexes 0 - 6 (from 0 - 64)

```
var bassValue = 0;
var getBaseMultiplier = function(minSample, maxSample, useManipulatedData) {

minSample = minSample || 0;
maxSample = maxSample || 6;

bassValue = 0;

//let data = _.getWallpaperEngineAudioData(null, true);

// Create a sum of the samples
for (let x = minSample; x < maxSample; x++) {
if(useManipulatedData) {
bassValue += _data[x] + _data[x + _data.length / 2];
} else {
bassValue += _rawData[x] + _rawData[x + _rawData.length / 2];
}
}

bassValue /= (maxSample - minSample);
bassValue /= 2;

// Some arbritary bassValue
return bassValue + 1;
}
```