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)
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/[email protected]/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/[email protected]/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>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 filefrom the Quick setup box - Add your HTML file, the skin file, and your mp3 tracks to the uploader, and click
Commit changesat 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
Branchdrop-down that likely initially has "None" selected, pickmain. Leave the next drop-down that appears at the default "/ (root)" and clickSave - 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.mp3tohttps://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
Actionstab 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!
