一个在Wallpaper Engine创意工坊上的开源项目: http://steamcommunity.com/sharedfiles/filedetails/?id=921617616

目前Circle Audio Visualizer使用了4个jquery插件，分别是jquery.audiovisualizer.bars、jquery.audiovisualizer.circle、jquery.time、juqery.slider、jquery.particles和jquery.logo。

slider插件用于背景切换，从window.wallpaperPropertyListener扩展方法userDirectoryFilesAddedOrChanged和userDirectoryFilesRemoved接收属性名propertyName、图片文件路径数组Files。

如果你不知道扩展方法userDirectoryFilesAddedOrChanged和userDirectoryFilesRemoved，请点击：Advanced: Web user customization - Importing User Images

目前提供了css、image、canvas三种模式切换，image和canvas支持背景切换特效。

初始化slider插件如下：

    $(selector).slider();

你也可以传递一些参数初始化slider插件(具体参数详见参数列表):

    $(selector).slider({
        sliderStyle: ...,
        readStyle: ...,
        ...
    });

updateAudioAverage：

调用$(selector).slider('updateAudioAverage', audioSamples);更新音频均值。

backgroundBlur：

调用$(selector).slider('backgroundBlur');根据音频均值模糊背景

backgroundZoom：

调用$(selector).slider('backgroundZoom');根据音频均值缩放背景

setUserColor：

调用$(selector).slider('selector', color);获取用户自定义的颜色地址，如果路径不存在默认为'255,255,255'。

setUserImg：

调用$(selector).slider('setUserImg', img);获取用户自定义的图片地址，如果路径不存在默认为空字符串。

setUserVideo：

调用$(selector).slider('setUserVideo', video);获取用户自定义的视频地址，如果路径不存在默认为空字符串。

setUserAudio：

调用$(selector).slider('setUserAudio', video);获取用户自定义的视频地址，如果路径不存在默认为空字符串。

cssUserColor：

调用$(selector).slider('cssUserColor');设置background-color为用户颜色

cssLinearGradient：

调用$(selector).slider('cssLinearGradient');设置background-image为线性渐变

cssSrcUserImg：

调用$(selector).slider('cssSrcUserImg');设置background-image为用户图片。

cssSrcDefaultImg：

调用$(selector).slider('cssSrcDefaultImg');设置background-image为默认图片。

addImg：

调用$(selector).slider('addImg');添加上张图片和当前图片。

delImg：

调用$(selector).slider('delImg');删除上张图片和当前图片。

clearCanvas：

调用$(selector).slider('clearCanvas');清空Canvas内容。

updateImgList：

调用$(selector).slider('updateImgList', currentFiles);更新图片列表。

changeSliderStyle：

调用$(selector).slider('changeSliderStyle'); 改变背景滑动模式。

changeSlider：

调用$(selector).slider('changeSlider');使用imgList当前图片。

stopSliderTimer：

调用$(selector).slider('stopSliderTimer');停止背景切换。

startSlider：

调用$(selector).slider('startSlider');开始背景切换。

addVideo：

调用$(selector).slider('addVideo');添加视频对象至节点。

delVideo：

调用$(selector).slider('delVideo');删除视频对象。

getVideoList：

调用$(selector).slider('getVideoList');从js/videoList.js中读取视频列表videoList。

getVideoStr：

调用$(selector).slider('getVideoList', index);从videoList读取索引对应值并转换成视频源。

videoSrcUserVideo：

调用$(selector).slider('videoSrcUserVideo');设置当前视频为用户视频并添加至视频列表。

videoSrcDefaultVideo：

调用$(selector).slider('videoSrcDefaultVideo');设置当前视频为默认视频。

currentVideo：

调用$(selector).slider('currentVideo');读取当前视频源。

prevVideo：

调用$(selector).slider('prevVideo');读取上一个视频源。

nextVideo：

调用$(selector).slider('nextVideo');读取下一个视频源。

setVideoProgress：

调用$(selector).slider('setVideoProgress', progress);按进度百分比设置视频当前读取位置。

setVideoPlaybackRate：

调用$(selector).slider('setVideoProgress', backRate);设置视频当前的播放速度。

playVideo：

调用$(selector).slider('playVideo');播放视频。

pauseVideo：

调用$(selector).slider('pauseVideo');暂停视频。

setVideoVolume：

调用$(selector).slider('setVideoVolume', volume);设置音量大小（%）。

getAudioList：

调用$(selector).slider('getAudioList');从js/audioList.js中读取音频列表audioList。

getAudioStr：

调用$(selector).slider('getAudioList', index);从audioList读取索引对应值并转换成音频源。

audioSrcUserAudio：

调用$(selector).slider('audioSrcUserAudio');设置当前音频为用户音频并添加至音频列表。

audioSrcDefaultAudio：

调用$(selector).slider('audioSrcDefaultAudio');设置当前音频为默认音频。

currentAudio：

调用$(selector).slider('currentAudio');读取当前音频源。

prevAudio：

调用$(selector).slider('prevAudio');读取上一个音频源。

nextAudio：

调用$(selector).slider('nextAudio');读取下一个音频源。

setAudioProgress：

调用$(selector).slider('setAudioProgress', progress);按进度百分比设置音频当前读取位置。

playAudio：

调用$(selector).slider('playAudio');播放音频。

pauseAudio：

调用$(selector).slider('pauseAudio');暂停音频。

setAudioVolume：

调用$(selector).slider('setAudioVolume', volume);设置音量大小（%）。

destroy：

调用$(selector).slider('destroy');销毁slider所在canvas、img。

set：

调用$(selector).slider('set', property, value);设置slider插件相关参数，具体参数详见参数列表。

在applyUserProperties: function (properties) { // do something }, 后尾添加：

    userDirectoryFilesAddedOrChanged: function (propertyName, changedFiles) {
        if (!files.hasOwnProperty(propertyName)) {
            files[propertyName] = changedFiles;
        } else {
            files[propertyName] = files[propertyName].concat(changedFiles);
        }
        wallpaper.slider('updateImgList', files[propertyName]);
    },
    
    userDirectoryFilesRemoved: function (propertyName, removedFiles) {
        for (var i = 0; i < removedFiles.length; ++i) {
            var index = files[propertyName].indexOf(removedFiles[i]);
            if (index >= 0) {
                files[propertyName].splice(index, 1);
            }
        }
        wallpaper.slider('updateImgList', files[propertyName]);
    }

particles插件用于创建一个canvas,并随机在canvas上生成粒子并按照某种方式移动。

初始化particles插件如下：

    $(selector).particles();

你也可以传递一些参数初始化particles插件(具体参数详见参数列表):

    $(selector).particles({
        number: ...,
        opacity: ...,
        ...
    });

addParticles：

调用$(selector).particles('addParticles', num);向canvsa添加粒子。

densityAutoParticles：

调用$(selector).particles('densityAutoParticles');根据粒子密度确定粒子数量。

updateAudioAverage：

调用$(selector).particles('updateAudioAverage', audioSamples);更新音频均值。

updateParticlesArray：

调用$(selector).particles('updateParticlesArray');更新粒子数组。

clearCanvas：

调用$(selector).particles('clearCanvas');清除canvas内容。

particlesImage：

调用$(selector).particles('particlesImage', imgSrc);改变图片粒子的图片路径。

drawParticles：

调用$(selector).particles('drawParticles', particles);绘制粒子。

drawLine：

调用$(selector).particles('drawLine', index);绘制索引对应的粒子与其它粒子的连线。

stopParticlesTimer：

调用$(selector).particles('stopParticlesTimer');停止粒子计时器。

runParticlesTimer：

调用$(selector).particles('runParticlesTimer');开始粒子计时器。

destroy：

调用$(selector).particles('destroy');销毁粒子所在canvas

setParticles：

调用$(selector).particles('setParticles', property);设置粒子数组粒子属性。

set：

调用$(selector).particles('set', property, value);设置particles插件相关参数，具体参数详见参数列表。

logo插件用于创建一个canvas,并随机在canvas上生成LOGO图像并按照某种方式移动旋转。

初始化logo插件如下：

    $(selector).logo();

你也可以传递一些参数初始化particles插件(具体参数详见参数列表):

    $(selector).logo({
        isLogo: ...,
        isCircular: ...,
        ...
    });

updateAudioAverage：

调用$(selector).logo('updateAudioAverage', audioSamples);更新音频均值。

clearCanvas：

调用$(selector).logo('clearCanvas');清空Canvas内容。

setUserImg：

调用$(selector).logo('setUserImg', img);获取用户自定义的Logo地址，如果路径不存在默认为空字符串。

updateLogo：

调用$(selector).logo('updateLogo');更新相关数据。

drawLogo：

调用$(selector).logo('drawLogo');绘制Logo。

drawCanvas：

调用$(selector).logo('drawCanvas');更新相关数据并绘制Logo。

stopLogoTimer：

调用$(selector).logo('stopLogoTimer');停止Logo计时器。

runLogoTimer：

调用$(selector).logo('runLogoTimer');开始Logo计时器。

destroy：

调用$(selector).logo('destroy');销毁logo所在canvas。

set：

调用$(selector).logo('set', property, value);设置logo插件相关参数，具体参数详见参数列表。

打开Wallpaper Engine，设置-综合，在CEF devtools port输入一个非占用端口，比如2333。

回到Wallpaper Engine，点击过滤，在左侧栏选择类型“网页”，来源“我的壁纸”；并选中你要调试的壁纸（这里我调试[4K]Audio Visualizer）

打开谷歌浏览器，输入地址http://localhost:23333/或则http://127.0.0.1:23333/（格式为：http://localhost:你设置的端口号/或则 http://127.0.0.1:你设置的端口号/）。如果没有显示请检查你设置的端口号是否被占用，并重新设置新的端口号，比如10086。

点击网页中的超链接，操作你在Wallpaper Engine中设置的选项，开始调试。请善用console命令

在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

• 邮件(909011298@qq.com)
• QQ: 909011298

感谢以下的项目,排名不分先后

• jquery
• moment
• particles