Steam Community :: Guide :: Advanced: Web audio visualizer

Store Page

Wallpaper Engine

All Discussions Screenshots Artwork Broadcasts Videos Workshop News Guides Reviews

Wallpaper Engine > Guides > Biohazard's Guides

148 ratings

Advanced: Web audio visualizer

By Biohazard

Follow this tutorial to handle audio recording in your web wallpaper. You can create visualizers or make elements in your wallpaper dynamic based on the audio input you receive, like colors or animations.

This is not for adding music or sound to a wallpaper. This is for visualizing music that you are already listening to from the computer.

Award

Created by

Biohazard
Offline

Category: Workshop

Languages: English

Posted

Updated

23 Oct, 2016 @ 11:08am

1 Feb, 2021 @ 3:02pm

19,348	Unique Visitors
246	Current Favorites

Guide Index

Overview

NEW DOCUMENTATION WEBSITE OUT

Prerequisites

Introduction

Enable audio input on your wallpaper

Registering an audio listener

Processing the audio samples

Attachments

Comments

NEW DOCUMENTATION WEBSITE OUT

Please check out our new documentation website, the guides on Steam are old and deprecated!

https://docs.wallpaperengine.io

Prerequisites

This tutorial requires knowledge about HTML, JavaScript and JSON. If you have never made a web wallpaper before, check out the starter tutorial for web wallpapers here: http://steamproxy.net/sharedfiles/filedetails/?id=770801435

Introduction

We will cover all necessary steps to receive (pre-transformed) audio samples in your web wallpaper from Wallpaper Engine. You can use these samples to build your own visualizers or build other dynamic elements that react to audio!

Enable audio input on your wallpaper

Before Wallpaper Engine will send you any audio data, you will have to set a flag in the project.json file of your wallpaper. So make sure to import your wallpaper in the editor first and then open the project.json from the wallpaper directory. The flag you need to set is named 'supportsaudioprocessing' and it's a member of the 'general' object. Simply setting this flag to true will suffice, as the following sample demonstrates:

{ "file" : "index.html", "preview" : "prev.png", "general" : { "supportsaudioprocessing" : true }, "title" : "Advanced Web Tutorial - Audio Input", "type" : "web" }

Registering an audio listener

After enabling audio input from Wallpaper Engine, you also have to register a listener function in JavaScript in order to handle them. Create a new function that will receive audio samples, the name can be whatever you like:

function wallpaperAudioListener(audioArray) { }

Now, in the window.onload event, register this function as follow:

window.onload = function() { window.wallpaperRegisterAudioListener(wallpaperAudioListener); };

wallpaperAudioListener will now be called when new audio samples arrive (currently with about 30 events per second).

Processing the audio samples

Now we'll take a look at audioArray, the parameter of the listener function. This array has a fixed length of 128, containing data for the left and right channel. Data for the left channel can be found in the first 63 buckets in form of positive floats (which may go beyond 1.0, so you should clamp them if necessary!). Lower frequencies are at the beginning of the array. The right channel can be found in the buckets 64 to 127 inclusive. Here the low frequencies are near 64 and up and the high ones again at the end of the array.

The following snippet demonstrates how these buckets can be iterated:

// Clears the rectangle
audioCanvasCtx.fillStyle = 'rgb(0,0,0)';
audioCanvasCtx.fillRect(0, 0, audioCanvas.width, audioCanvas.height);

// Render bars along the full width of the canvas
var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
var halfCount = audioArray.length / 2;

// Begin with the left side in red
audioCanvasCtx.fillStyle = 'rgb(255,0,0)';

for (var i = 0; i < halfCount; ++i) {
var height = audioCanvas.height * audioArray[i];
audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height, barWidth, height);
}

// Now draw the right side in blue
audioCanvasCtx.fillStyle = 'rgb(0,0,255)';

for (var i = halfCount; i < audioArray.length; ++i) {
var height = audioCanvas.height * audioArray[191 - i];
audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height, barWidth, height);
}

And that's it! You can use the audio samples in whatever way you like to of course. Changing colors dynamically, adjusting speeds or animating objects based on music now becomes possible.

Attachments

Demo wallpaper with audio sampling: http://www.mediafire .com/file/radty4so7fdzy7h/web_audio.zip (REMOVE THE SPACE.)
Copy this folder into wallpaper_engine/projects/myprojects to use it.