Using Skins with Webamp on Neocities

Webamp is a reimplementation of Winamp 2.9 in HTML5 and JavaScript. You can add it on Neocities easily:

<script src="webamp.bundle.min.js"></script>
<div id="app"></div>
<script>
	const Webamp = window.Webamp;
	const webamp = new Webamp({
		initialTracks: [
			{
				metaData: {
					artist: "DJ Mike Llama",
					title: "Llama Whippin' Intro"
				},
				url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
				duration: 5.322286
			}
		]
	});

	webamp.renderWhenReady(document.getElementById('app'));
</script>

Adapted from the minimal example in the Webamp repo.

However if you want to use a custom skin, you'll run into some problems on Neocities' free plan. Skins are contained in WSZ (Winamp Skin Zip) files, which you cannot upload to Neocities. Uploading the skins on an external host also won't work, as Neocities' policies prevent you from accessing them:

To prevent phishing attacks, Neocities does not allow sending data to external servers after page load with newer free plans (older sites have legacy support for it). Content can be loaded on page load via HTML, but JavaScript is not allowed to send arbitary requests to external servers after page load. If you would like to enable this functionality, you will need to upgrade to supporter.

Neocities FAQs

So here is a partial workaround for using a custom skin on a free account.

When Webamp loads a skin, it converts all of the skin's image files into CSS, which it uses to style the player. You can get the converted CSS from the Winamp Skin Museum by viewing the skin, then using your browser's developer tools to extract it.

For example, say you want the lovely Mr. Bean skin that I've got on this page. Select the skin in the Museum, then hit F12 to open your browser's developer tools.

Now you can either...

Look in the "Elements" tab ("Inspector" in Firefox), expand the <head> element, and look in there for the element <style id="webamp-skin"> - it should be at the bottom, before the closing </head> tag. Expand that element, then copy everything in it.
In the "Console" tab, execute the following:
```
document.getElementById('webamp-skin').innerText
```
This will return the contents of the <style id="webamp-skin"> element, which you can then copy.

Paste your copied contents into a new CSS file, and upload it to your Neocities. Include the file on your page along with Webamp, and it should now appear with your chosen skin.

<link rel="stylesheet" href="mr-bean-skin.css"/>

One further change you can make, is to do a find-and-replace in the CSS file for every instance of ".winamp-active", replacing it with ":active". This will fix some active button states that would otherwise show the base skin.

Note that this doesn't work perfectly: some of the skin's custom colors such as playlist items, and the visualizer in the main window will not be changed from the base skin (as these elements are not styled in the same way). But it's a decent approach to work around Neocities' free plan limitations.

Questions, comments? The Webamp Discord is a good place for 'em.