Removing the equalizer panel on WebAmp (and keeping it gone!)

Began writing this article June 11 2025, finished on June 12th.

Have you ever used WebAmp and thought to yourself: man this music player is cool, but I kinda don't need an equalizer panel and wish it would go away? Well, you could click one of the tiny buttons on the panel and close it that way, however the panel will regenerate once you reload the page. If you wished it stayed gone, this guide is for you!

(This guide also assumes you already have WebAmp set up on your site.)

"I don't care how it works, just gimme the steps!"

Step 1) Paste the following code above or below the initialTracks of your WebAmp's script.

__initialWindowLayout: {
        main: { position: { x: 0, y: 0 } },
        playlist: { position: { x: 0, y: 116 }, size: [0, 4] },
},

When done correctly, the code should look something like this:

[There could be more code, this is just a snippet]
const Winamp = window.Webamp;
const webamp = new Webamp({
    __initialWindowLayout: {
        main: { position: { x: 0, y: 0 } },
        playlist: { position: { x: 0, y: 116 }, size: [0, 4] },
    },
    initialTracks: [
        {
            metaData: {
                artist: "2 Mello",
                title: "Tag Walls, Punch Fascists",
            },
            url:"https://files.catbox.moe/1f9vlw.mp3",
        },
    ],
});
        

Or it could look like this, if you placed it beneath the initialTracks:

[There could be more code, this is just a snippet]
const Winamp = window.Webamp;
const webamp = new Webamp({
    initialTracks: [
        {
            metaData: {
                artist: "2 Mello",
                title: "Tag Walls, Punch Fascists",
            },
            url:"https://files.catbox.moe/1f9vlw.mp3",
        },
    ],
    __initialWindowLayout: {
        main: { position: { x: 0, y: 0 } },
        playlist: { position: { x: 0, y: 116 }, size: [0, 4] },
    },
});
        

Step 2) Place the following code snippet above the line that begins with "webamp.renderWhenReady[...]"

webamp.store.dispatch({ type: "CLOSE_WINDOW", windowId: "equalizer" });

If done correctly, the code should look something like this

[There could be more code, this is just a snippet]
    initialSkin: {
        //url: "/webamp/skins/dcbel-dark-green.wsz"
        url: "https://files.catbox.moe/39lxn8.wsz"
    },
});

webamp.store.dispatch({ type: "CLOSE_WINDOW", windowId: "equalizer" });

webamp.renderWhenReady(document.getElementById('winamp-container-2'));
        

If you're really unsure as to how the code snippets I've provided should be arranged, I've also included a code snippet ripped from my own page which you can use to cross reference. It will only include content between the script tags. Click the button below to view it.

const Winamp = window.Webamp;
    const webamp = new Webamp({
        __initialWindowLayout: {
            main: { position: { x: 0, y: 0 } },
            playlist: { position: { x: 0, y: 116 }, size: [0, 4] },
        },
        initialTracks: [{
            metaData: {
                artist: "2 Mello",
                title: "Tag Walls, Punch Fascists",
            },
                //url: "/webamp/music/Tag-Walls-Punch-Fascists.mp3",
                url:"https://files.catbox.moe/1f9vlw.mp3",
            },            
        ],
        initialSkin: {
            //url: "/webamp/skins/dcbel-dark-green.wsz"
            url: "https://files.catbox.moe/39lxn8.wsz"
        },
});
    
webamp.store.dispatch({ type: "CLOSE_WINDOW", windowId: "equalizer" });
webamp.renderWhenReady(document.getElementById('winamp-container-2'));
              

"I kinda care how it works, explain it to me!

Explaining the following snippet first:

__initialWindowLayout: {
    main: { position: { x: 0, y: 0 } },
    playlist: { position: { x: 0, y: 116 }, size: [0, 4] },
},

As the name initialWindowLayout might suggest, this snippet affects the initial layout of the WebAmp widget, influencing how the thing looks when the page is loaded. Position, as you might guess, controls where on the screen each panel appears. A positive X value moves the panel to the right, and a positive Y value moves the panel downwards. The code above makes it so the playlist panel is now positioned beneath the main panel.

The size property is only applied to the playlist panel since after deleting the equalizer panel (more on that later) there is an empty void left behind. So, the size property is used to stretch the playlist panel to fill that gap. You can scale the playlist (and the main panel, if you felt like it) horizontally by doing 'size: [4, 0]'. Likewise, doing 'size: [0, 4]' will scale the panel vertically. Horizontal scaling stretches the panel to the right, and vertical scaling stretches the panel downwards. Both horizontal and vertical scaling can be applied at the same time (ex. size: [5, 4]).

Now explaining this snippet:

webamp.store.dispatch({ type: "CLOSE_WINDOW", windowId: "equalizer" });

What this does is that it closes the equalizer panel. By placing this line before the line that begins with "webamp.renderWhenReady[...]", it deletes the panel before the WebAmp widget even loads, effectively making it like it didn't exist.

Comments, concerns, complaints?

If you're having trouble getting this to work or have noticed an innaccuracy, do not be afraid to contact me! I'd love to help!