How to Embed WINAMP on Your Website

Created: Jan/11/2022

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 these in your head tags:

<script src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
(I'm not actually sure if Winamp requires jQuery, but I'd keep it just to be safe)

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.

Adding Songs:

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)

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.

Customization:

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.

Other Important Stuff:

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. But I don't either.
I use Catbox to host my files.
Some sites don't work and I'm not sure why that is. If you song won't play, that's probably why. Try to find somewhere else to host your file.

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.