webamp

Webamp NPM Module

Development

I do most development by starting the demo site in dev mode and iterating that way. The following commands will install all dependencies, run an initial development build and then start a local server. Every time you save a file, it will rebuild the bundle and automatically refresh the page.

# First clone the repo, then...
cd webamp
# Change into the NPM module's sub directory
cd packages/webamp
# __Note:__ Please use pnpm over npm/yarn, since pnpm will respect our `pnpm-lock.yaml` file
pnpm install
pnpm start

http://localhost:8080/ should automatically open in your browser.

# Run tests and lint checks
pnpm test

Building

The NPM module is built separately from the demo site. To build it run:

pnpm run build-library

This will write files to ./built.

Testing

pnpm test

This will run the tests the linter and the type checker.

To update snapshots run

pnpm test -u

Cutting a Release

• Update the version number in package.json
• Rename the "Next" title at the top of CHANGELOG.md to the new version number and ensure it is up to date
• Update the static VERSION property of the Webamp class in webampLazy.tsx
• Git commit
• cd packages/webamp
• npm publish
• Git tag the commit (e.g. 1.4.2 or 1.4.3-beta.3)
• Push tag to GitHub git push origin <TAG_NAME>
• Update all the examples to use the new version:

• minimal/index.html
• minimalMilkdrop/index.html
• webpack/package.json
• webpackLazyLoad/package.json
• https://codesandbox.io/s/y0xypox60z

• Commit and push

Reference

• skinspecs.pdf
• Skinner's Atlas 1.5 by Jellby
• Winamp Skinning Tutorial
• Sacrat Skinning tutorial parts 1, 2, 3, 4, and 5,
• Winamp Wiki

Predecessors

• Webamp2x An impressive implementation from 2002(!).
• JsAmp An implementation from 2005 by @twm (via Hacker News).
• LlamaCloud Comp From 2011 by Lee Martin (via Twitter)
• Winamp em HTML5 e Javascript In 2010 a developer named Danilo posted one of his HTML5 experiments: "an audio player simulating good old Winamp". You will have to download the zip file.
• JuicyDrop An HTML5 implementation with less emphasis on being true to the skin, but fully featured visualizations. @cggaurav is keeping it alive on GitHub
• Spotiamp The folks at Spotify reimplemented Winamp as a frontend for Spotify. Not in a browser, and only runs on Windows. It has since been discontinued.