shinmai/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Step 1 - Gathering the files

You'll need the following:

an HTML page to place the player into
music files to play (e.g. MP3 files with IDv3 tags for artist & track name)
a .wsz WinAmp skin file (the WinAmp Skin Museum has a ton)

Step 2 - the code

Assuming your html file is hosted at the address https://domain.tld/webamp/, your skin file is named skin.wsz, and your music files are named track01.mp3 and track02.mp3 and all are in the same folder as the HTML file, and the HTML element on your page you want the player centered on has the id main, the code to spawn a WebAmp player with the skin applied and the two tracks in the playlist is:
<script src="https://unpkg.com/webamp@1.4.2/built/webamp.bundle.min.js"></script>
<script>
    const Webamp = window.Webamp, webamp = new Webamp({
		initialTracks: [
            { url: "https://domain.tld/webamp/track01.mp3", },
            { url: "https://domain.tld/webamp/track02.mp3" },
        ],
		initialSkin: { url: './skin.wsz' },
    });
    webamp.renderWhenReady(document.getElementById('main'));
</script>
If you don't have an existing HTML file, a very bare-bonens file to house just the player could be:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style type="text/css" media="screen">
    * { font-family: sans-serif; }
    body { font-size: 2em; }
    @media (prefers-color-scheme: dark) {
      body { background: #222; color: #ccc; }
    }
    @media (prefers-color-scheme: light) {
      body { background: #eee; color: #444; }
    }
  </style>
</head>
<body>
	<script src="https://unpkg.com/webamp@1.4.2/built/webamp.bundle.min.js"></script>
	<script>
	    const Webamp = window.Webamp, webamp = new Webamp({
			initialTracks: [
	            { url: "https://domain.tld/webamp/track01.mp3", },
	            { url: "https://domain.tld/webamp/track02.mp3" },
	        ],
			initialSkin: { url: './skin.wsz' },
	    });
	    webamp.renderWhenReady(document.getElementById('main'));
	</script>  
</body>
</html>
Step 3 - GitHub setup

After registering a GitHub account:

Create a new repository.

This can be started from the "+" menu in the top toolbar


In the page that pops up, give your repository a name and click Create repository
On the repository set up page, pick uploading an existing file from the Quick setup box

Add your HTML file, the skin file, and your mp3 tracks to the uploader, and click Commit changes at the bottom of the page.
Go to the repository Settings via the toolbar at the top of the page (it should be the last option)
In the second section "Code and automation", the last option is Pages, select that.
From the Branch drop-down that likely initially has "None" selected, pick main. Leave the next drop-down that appears at the default "/ (root)" and click Save

If you didn't set the tracks in your code to point to your GitHub Pages URL beforehand, go back to the Code tab, select your HTML document and in the upper-left corner of the code view, click the pencil icon and in the editor that opens change the links from https://domain.tld/webamp/track01.mp3 to https://YOUR-GITHUB-USERNAME.github.io/YOUR-REPOSITORZY-NAME/track01.mp3

(This is also how you'd add or remove tracks later, by uploading the files via the Code pages "Add file -> Upload files" option and then editing the HTML to add them to the player's playlist)
Click Commit changes... in the upper-left corner, and again in the modal dialog that pops up


In the screenshot I've added a 3rd row to the code to add a 3rd track to the player. Each track is a JavaScript object (enclosed in curly brackets) and they're separated by a comma, the last one on the list can have an extraneous comma to make it easier to copy&paste new lines without messing up the formatting or syntax of the JavaScript code.
Click the Actions tab at the top of the page. If you followed the steps step-by-step, there should be 2 items in the workflow runs list. Depending on how fast you are, one of them might still be pending.

Wait until the they both have green checkmarks, and head to your GitHub Pages URL (USERNAME.gihtub.io/REPOSITORYNAME) and your player should be live!