ADDING WEBAMP TO A WEBPAGE

If there's one thing you need to know about me is that I am dense. Are github repo's designed for fuckin normies like me? No, and I get that they shouldn't be.

I had hell trying to figure out how to just fuckin. Put. Rectangle. On. Page. I will give myself credit and say the biggest issue I had wasn't actually listed anywhere on the github page. I'm getting ahead of myself, we need to cover basics.

CHECK IF YOUR SITE HOST HAS FILE RESTRICTIONS

In regards to Neocities, if you have made your account in or after 2024, then you won't be able to load any songs or skins for your webamp if you aren't a sponsor. MP3s/MP4s and webamp skins(wsz files) aren't covered under the free membership. It sucks, but you can read up on their reasoning on their 'allowed file types' statement. As of September 2024 - Nekoweb doesn't have any file limitations. I'm praying no one fucks that up. In general, make sure you poke around and see where you site host stands - if you even use one.

Check through this workaround guide for adding a skin without being a supporter from Sambaneko.
The song section below on this page mentions some other workaround for adding the songs. I haven't tried it myself, I'm in a spot where I can be a supporter. There's a link to the webamp discord at the bottom of the guide. FIRST - search through the messages to make sure no one has had the exact same issue. THEN, making sure you're being nice, explain specifically what your issue is and what you've tried, and provide code examples by uploading it to codepen.io sharing the link.

GETTING IT RUNNING

Codepen reference here. There are a handful of little quirks with this thing. Read this entire section before doing anything.

MOVING WINAMP

I still use cave man methods of moving things. It acts like a div, however there's this feature in it that makes it want to snap to the sides of the page. Go ahead and move it really close to the top of the page. You're going to have to move it through a style at least 180px from the edge to make it not do that on load.

SONGS

There is a metadata section in the script for you to put the artist, song name, and link to the song. In the player, this should show up as:
ARTISTNAME - SONGNAME.
Now if you're a cheeky fella, you may have thought "I can just hotlink from a file hosting site." And you can! I've tested it both live on neocities and locally, and it will actually pull the mp3 file name. In the playlist it just showed the file name, "EXAMPLE.mp3". I HAVE seen it render how it's supposed to, so maybe I just fucked something up. AND in this case, catbox.moe is following a CORs standard to even allow you to load it.
Servers have to have something in their structure that lets your browser ask to load a file from it. The only exception to this, is hosting the files on the same server as the site (just uploading everything to neocities). I'm just some stoner, I couldn't give you any more info than that. If you don't care about how the name looks in the playlist, you could try some file hosts and see which ones work. Heads up - catbox.moe renames your files to a random set of characters.

SKINS

Now for the real treat of webamp, skins. You can broswe through the Winamp Skin Museum to find the one you want. I've thought about making my own and maybe making a tutorial, but the museum has so goddamn many. One day. Anyway, look through it and find one you want. They try to blur NSFW ones, but some aren't flagged btw. Click on it and download it. If it gave you a wsz file, then you're good. If it gave you a zip file, no fear. Literally rename the .zip part into .wsz. WSZ files are just reflavored zips. I haven't tried using a file host for skins, that's your battle to fight if you want that path.

TESTING IT

The part no one told me about. Browsers don't like to let external things load your files, which I reluctantly agree is 'good'. Webamp is an external thing. Firefox fucking hates this thing. If you're using firefox, you won't be able to fully test that your skin or songs are loading locally. To see it in full functioning form, you're going to have to put everything onto your site host and test it from there. If you try to open the source file locally in the browser, you're going to get a 'Failed to load skin' alert, and the songs won't play. This drove me insane LMAO. Fill all the metadata info out, upload it to site host, and it should be fine if it's done correctly. You can technically test things by force loading the skin and only one(1) song at a time by clicking the teeny tiny icon on the top left corner to pull up the menu. Click on the play option to test a MP3, and the skin option to pull up the skin.

That's it. If you have problems - don't come to me lol. Review the github pages, and search through the Webamp discord BEFORE politely asking.