webamp installation guide

a little tutorial on how to use Webamp by captbaritone. I in no way take any credit. i just figured that as someone who understands things better when the steps are written out, there must be others who will benefit from looking at it this way.

Step 1: copy this code onto the page the page where you want your webamp player

Step 2: Create a seperate Javascript file and copy this code

// once WebAmp script is loaded, do this.
      function startWebAmp() {
        const app = document.getElementById("webamp");
        const webamp = new Webamp(
          {
            __initialWindowLayout: {
                // width = 275
                main: { position: { x: -275, y: 0 } }, // 0,0
                equalizer: { position: { x: -275, y: -120 } }, //0,116
                playlist: { position: { x: -275, y: -240 }, size: [0, 0] }, //0,232
                },
           initialSkin: {
                url: " https://cdn.webampskins.org/skins/f7ac1decc3785bc34c07a6caa4661ace.wsz "
           },
          }
          );
        webamp.renderWhenReady(app);
        
        /* skins 
        ac124d0b0b1badb356c338d66e3fd565 - pac-man
        */
        
        //https://aqdas-cors-anywhere.herokuapp.com/ -- to subvert the CORS problem
        webamp.appendTracks([
          // TEMPLATE: {url: "", metaData: {artist: "", title: ""}},

{url: "https://files.catbox.moe/52m8kp.mp3", metaData: {artist: "Style Savvy 2008", title: "Apartment Theme"}},
          {url: "https://files.catbox.moe/y9eold.mp3", metaData: {artist: "Keiichi Suzuki and Hirokazu Tanaka", title: "The Tenda's Cave"}},
          {url: "https://ia803103.us.archive.org/4/items/loonaarchive/Max%20%26%20Match%2003%20Uncover.mp3", metaData: {artist: "Odd Eye Circle", title: "Uncover"}},
          {url: "https://files.catbox.moe/2ei83f.mp3", metaData: {artist: "Toru Minegishi", title: "Sacred Grove"}},
          {url: "https://files.catbox.moe/1toqmt.mp3", metaData: {artist: "Boards of Canada", title: "Wildlife Analysis"}},
          {url: "https://files.catbox.moe/fb5vy0.mp3", metaData: {artist: "Takayuki Negishi", title: "切ない 気持ち"}},
          {url: "https://files.catbox.moe/u5s19l.mp3", metaData: {artist: "Vince Guaraldi Trio", title: "Heartburn Waltz"}},
          {url: "https://files.catbox.moe/pjewwe.mp3", metaData: {artist: "Masafumi Takada", title: "Beautiful Morning"}},
          {url: "https://files.catbox.moe/9q78dy.mp3", metaData: {artist: "Sunny Day Real Estate", title: "Faces in Disguise"}},
          {url: "https://files.catbox.moe/89sugc.mp3", metaData: {artist: "Perfume", title: "エレクトロ・ワールド (Electro World)"}},
          {url: "https://files.catbox.moe/jxqxju.mp3", metaData: {artist: "Fiona Apple", title: "The First Taste"}},
          {url: "https://files.catbox.moe/mbwyx4.mp3", metaData: {artist: "Koji Kondo", title: "Forest Temple "}},
        ]);
         
        //webamp.play();
      }
      
      // Load the WebAmp script and run the above function
      // method where it loads the script in here. can't import so create the element.
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.async = true;
      script.onload = function() { // once script loaded
        startWebAmp();
      };
      script.src = "https://unpkg.com/webamp";
      document.head.appendChild(script);

Step 3: From here on you can replace the mp3 links i have with the songs of your choice. if you are not a neocities supporter, you can upload the mp3 files to a file sharing host such as catbox.moe. If you can't find mp3 files of the song of your choice, you can find a youtube link and paste it into this site which automatically converts it to an mp3 file.

Step 4: Then you can manually type in the name of the song and the artist

Step 5: if you want to change the skin, head over to the Webamp Skin Museum and find the skin of your choosing. Click on it and look at the url. Here you will copy this section of the url that i highlighted (this is just an example)
https://skins.webamp.org/skin/7b9df7892503371430aaf99ea7a172c0/Unreal_Skin_Of_The_Same_Game.wsz/

Step 6: Go back to your JavaScript file and paste that section into the initialSkin section, replacing the "f7ac1decc3785bc34c07a6caa4661ace"

Step 7: Go back to the html page where you are placing the webamp player, and in the script src tag, put the url of the javascript file you made
Sometimes it takes a little while for the skin/the music to show up