Add and toggle sound on your web wallpaper!

This guide will tell you how to set an audio background music/noise in your web wallpaper and toggle it in the WPE properties.

About

This guide is for wallpaper developpers who want to add sounds in their web wallpaper. But also, it will teach how to add a sound toggle option so users can toggle sound on and off from their wallpaper.

This guide requires a lil knowledge of js and html. But if you're a web wallpaper developper, you probably have this already. :p

Prepare the stuff

First, you need to make your web wallpaper of course. Do it the usual way you do.

Now to add audio, (any audio, background sound or just a single action sound or anything) you must use ogg files.
- Mp3 files are not supported at all by WPE.
- Wav files are supported but you would like to keep your wallpaper at a low weight, right?
- For m4a, I have no idea. Feel free to try and report me if it worked or not for you. :p

Also, note that the audio might have a very small latence in loops. Don't expect to have a seamless loop noise in your wallpaper. If needed, make a sound between 30 or 1min long. The latency will be a bit less noticeable.

Once you're ready, get to next step of this guide. :p

Adding option and codes

First, prepare your wallpaper for the workshop as usual, but don't publish it yet. So WPE generates the project.json file.

Now, open the json and add the following in "properties":

"customSound" : 
			{
				"options" : 
				[
					{
						"label" : "ON",
						"value" : 1
					},
					{
						"label" : "OFF",
						"value" : 0
					}
				],
				"text" : "Sound",
				"type" : "combo",
				"value" : 1
			},

So, your json should be something like this:

{
	"contentrating" : "Everyone",
	"description" : "This is my awesome web wallpaper with a frickin' ambient sound that can be toggled. I'm the best, baby.",
	"file" : "index.html",
	"general" : 
	{
		"properties" : 
		{
			"customSound" : 
			{
				"options" : 
				[
					{
						"label" : "ON",
						"value" : 1
					},
					{
						"label" : "OFF",
						"value" : 0
					}
				],
				"text" : "Sound",
				"type" : "combo",
				"value" : 1
			},
			"schemecolor" : 
			{
				"order" : 0,
				"text" : "ui_browse_properties_scheme_color",
				"type" : "color",
				"value" : "0 0 0"
			}
		}
	},
	"preview" : "preview.jpg",
	"tags" : [ "Game" ],
	"title" : "My awesome web wallpaper with sound",
	"type" : "web",
	"visibility" : "public"
}

This will add a Sound toggle option like this in the wallpaper's properties:


It's there but for now it does nothing. It's because you need to tell your index.html it must react to this menu.

The wallpaper property listener is poorly documented, but you can do the following:

<audio id="background_audio" loop autoplay> 
		<source src="audiofile.ogg" type="audio/ogg">
</audio>

<script type='text/javascript'>
		var soundEl = document.getElementById('background_audio');
		
		window.wallpaperPropertyListener = { 
			applyUserProperties: function(properties) { 
				if (properties.customSound) { 
					if (properties.customSound.value !== "") { 
						soundEl.volume = properties.customSound.value;
					} 
				} 
			} 
		} 
	</script>

Technically, this code will get the values 1 or 0 from the properties we added in the json, will get the audio with the id "background_audio" and will set its volume to either 1 or 0 to trigger it. There's probably other ways to make it work, but so far, in all the ones I tried, this one works perfectly.

And then you're done!

[Max le Fou]

All web wallpapers does that. Complain to the WPE dev.

[k2helix]

Hello, I did this and the music works fine, but there is a problem: The music keeps playing when other apps are opened