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.

Lively wallpaper audio visualizer