Most values will never go above 1.00, but due to the nature of the implementation, in rare cases this might spike above 1.0 which can cause your wallpaper to render incorrectly. This is to ensure the audio levels are limited to 1.00 at their peak. You may have noticed that we have also wrapped the audioArray into Math.min(audioArray, 1). This logic is repeated for all audio frequencies, each time Wallpaper Engine supplies a new set of audio data. If the height of the window is 1080 and the volume level for the current frequency (stored in audioArray) is 0.50, the bar for this specific frequency will be drawn with a height of 540 pixels (1080 * 0.50). Let's assume the user has a 1920x1080 screen resolution.

The height of the audio bars is determined by the volume level of the frequency that is currently being iterated over in the for loop. The name for that function is up to you, but it must have parameter that takes the audio volume levels as an array.įunction wallpaperAudioListener ( audioArray ) The function will later contain your custom logic for the audio handling. In the example below, we're also creating an empty wallpaperAudioListener(audioArray) function that is handed as a callback parameter to the wallpaperRegisterAudioListener. When in doubt, call this function at the end of your body tag.

Please note: Don't register the audio listener within the window.onload event (or any similar events), this is unreliable and can lead to Wallpaper Engine missing certain events. You should call the wallpaperRegisterAudioListener function once. Wallpaper Engine provides the window.wallpaperRegisterAudioListener function for this purpose, it expects a callback function that you also need to create. In order to get started with an audio visualizer, you have to register a listener function in JavaScript that will supply the audio volume levels to you. Utilizing these volume levels allows you to build various types of audio visualization, from full-on bar audio visualizers, to making certain elements on your wallpaper react to the beat of music (by only looking at low frequency ranges, as they usually represent the beat of audio being played).

Each part represents a frequency range for the audio: Low frequencies represent bass while high frequencies represent treble sound ranges. Each channel splits the audio frequencies into 64 parts. Wallpaper Engine allows you to process audio volume levels for the left and right audio channel and use that to visualize audio that is being played on the user's system.

Visualize value wallpaper