Well, maybe not the actual Winamp. But we can use Webamp, which is literally just Winamp but in the browser.
There was an official code from Webamp to embed it on your site, but it was never clear on how to, and people couldn't get it to work. So I fixed it.
(Please read the very bottom of this entry if something isn't working, because Webamp is VERY finicky on how it wants to work.)
First, put this in your head tags:
<script src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js"></script>
Now, put this directly in your body tags.
<div style="width:40px; height:40px; position:absolute; bottom:0px; left:0px;">
<div id="winamp-container"></div>
<script>
const Winamp = window.Webamp;
// All configuration options are optional.
const webamp = new Webamp({
// Optional.
initialTracks: [
{
metaData: {
artist: "Artist",
title: "Title",
},
url: "URL TO SONG .mp3",
}, {
metaData: {
artist: "Artist",
title: "Title",
},
url: "URL TO SONG .mp3",
},
{
metaData: {
artist: "Artist",
title: "Title",
},
url: "URL TO SONG .mp3",
},
],
initialSkin: {
url: "URL TO SKIN .WSZ"
},
});
webamp.renderWhenReady(document.getElementById('winamp-container'));
</script>
</div>The player should spawn wherever the winamp-container is, in the top left origin of it's parent container that has positioning. Which I've included in the code above but you can change it. (The one I've included spawns the amp in the bottom left)
Since the amp itself is positioned absolute, its parent container should have positioning as well.
For some reason I couldn't get it to work without setting a fixed size for the parent container, so you might want to do that.
However it's important that you DON'T rename winamp-container, for some reason it requires this specific name.
You have to manually put in the songs you want as well as their titles. Just replace everything inside the " "s with whatever.
YOU NEED THE DIRECT LINK TO THE MP3 FILE OR IT WONT WORK (url ending in .mp3)
MP3'S CANNOT BE FROM OTHER NEOCITIES SITES. For some reason hotlinking an mp3 from another Neocities site won't work. It has to be from your own site. So if you don't have supporter, tough luck.
I use Catbox to host my audio files.
Some sites don't work and I'm not sure why that is. If your song won't play, that's probably why. Try to find somewhere else to host your file.
I've included three spots for songs in the code above, but all you have to do to add more is just put another:
{
metaData: {
artist: "Artist",
title: "Title",
},
url: "URL TO SONG .mp3",
},BEFORE initialSkin, or it'll break.
I'm not aware that there's a maximum number of tracks you can have. Go nuts.
Choosing a skin is optional, but you need to find one. Head over to Winamp Skin Museum. If you don't specify a skin, it'll just use the default.
Skins are in .WSZ format which you can't host on Neocities unless you have supporter.
If you're unable to put Winamp in a specific spot on the page (and it spawns in the very center of the page, or off screen) try removing position from your HTML and body tags. Or trying giving them a fixed width.