Skip to content
Winamp 2 reimplemented for the browser
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Run prettier Jul 13, 2019
css Pressed state for library table headers Mar 28, 2019
demo Use Window's real default background color Apr 12, 2019
docs Notate that setSkinFromUrl is not yet published May 21, 2019
examples Document examples May 20, 2019
experiments Improve parser tests Jul 21, 2019
js Fix incorrect case of file Jun 27, 2019
presets Add builtin presets json Nov 9, 2018
scripts Trailing commas! Mar 19, 2019
skins Add Internet Archive skin Oct 2, 2018
.babelrc Remove redundent plugin declaration Nov 20, 2018
.editorconfig Format css according to prettier default config Oct 20, 2018
.eslintignore Ignore built asset from eslint Apr 1, 2018
.eslintrc In a world with types, consistent-return is less important Mar 19, 2019
.gitattributes Typo Jan 16, 2019
.gitignore Move demo site into its own directory Dec 30, 2018
.prettierignore Upgrade Prettier Jan 25, 2019
.travis.yml Stick with old versions of node May 2, 2019
CHANGELOG.md Add a method to set the skin (#787) May 21, 2019
LICENSE.txt Add a license Jan 31, 2015
README.md Document more about the demo site Jun 3, 2019
index.d.ts Add a method to set the skin (#787) May 21, 2019
jest-puppeteer.config.js Trailing commas! Mar 19, 2019
netlify.toml Redirect webamp.net to webamp.org Apr 29, 2019
package.json Remove bundlesize Jun 27, 2019
static.d.ts Typescript cli (#647) Aug 28, 2018
tsconfig.json Don't attempt to type check compiled assets Feb 16, 2019
yarn.lock Bump lodash from 4.17.11 to 4.17.13 (#816) Jul 20, 2019

README.md

Travis Codecov Discord

Webamp

A reimplementation of Winamp 2.9 in HTML5 and JavaScript.

As seen on TechCrunch, Motherboard, Gizmodo, Hacker News (1, 2, 3, 4), and elsewhere.

Give it a try!

Screenshot of Webamp

Works in modern versions of Edge, Firefox, Safari and Chrome. IE is not supported.

Features

Check out this Twitter thread for an illustrated list of features: https://twitter.com/captbaritone/status/961274714013319168

Use Webamp in your own project

Its possible to use Webamp as a media player on your own website. In fact, the Internet Archive offers it as an optional player for all of their archived audio tracks. Read more.

For examples of how to add Webamp to your projects, check out out examples/ directory.

See the usage documentation for more detailed information.

About This Repository

This repository contains a number of different things:

  1. ./: The code for the Webamp NPM module
  2. ./demo: The code for the demo site which lives at webamp.org, see the next section for more details
  3. ./examples: A few small examples showing how to use the NPM module
  4. ./experiments: A few small projects that are either related to Webamp, or may some day be a part of Webamp

About the Demo Site

The demo site, webamp.org, uses the same interface as the NPM module but adds the following functionality by utilizing Webamp's public API

Additionally, it makes use of some private Webamp APIs to add the following functionality:

  • Butterchun integration to render MilkDrop visualizations. We intend to make this part of the public API soon.
  • "Screenshot" mode https://webamp.org/?screenshot=1 which can be used together with Puppeteer to automate the generation of Winamp skin screenshots

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.

# Clone the repo
cd webamp
# __Note:__ Please use yarn over npm, since yarn will respect our `yarn.lock` file
yarn

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

# Run tests and lint checks
yarn test

Building the demo site (webamp.org)

To do an optimized build of the demo site, you can run:

yarn run build

If you wish to test this build locally, run:

yarn run serve

Then open the local ip/port that is output to the console in your browser.

Building the NPM module

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

yarn run build-library

This will write files to ./built.

Testing

yarn test

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

To update snapshots run

yarn test -u

Deploying the Demo Site

Netlify watches GitHub for new versions of master. When a new version is seen, it is automatically built using npm run build and pushed to the server. Additionally, Netlify will run a build on every pull request and include a link under the heading "Deploy preview ready!". This enables easy high level testing of pull requests.

In short, deploying should be as simple as pushing a commit to master.

Additionally, if you want to fork the project, deploying should be as simple as setting up a free Netlify account.

Advanced Usage

There are some "feature flags" which you can manipulate by passing a specially crafted URL hash. Simply supply a JSON blob after the # of the URL to change these settings:

  • skinUrl (string) Url of the default skin to use. Note, this file must be served with the correct Allows Origin header.
  • audioUrl (string) Url of the default audio file to use. Note, this file must be served with the correct Allows Origin header.
  • initialState (object) Override the initial Redux state. Values from this object will be recursively merged into the actual default state.

Note: These are intended mostly as development tools and are subject to change at any time.

Community

Join our community chat on Discord: https://discord.gg/fBTDMqR

There are a few related projects that have communites:

In the Wild

A list of public websites that are using Webamp:

Reference

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.

Thanks

  • Butterchurn, the amazing Mikdrop 2 WebGL implementation. Built and integrated into Webamp by: jberg
  • Research and feature prototyping: @PAEz
  • Beta feedback, catching many small UI inconsistencies: LuigiHann
  • Beta feedback and insider answers to obscure Winamp questions: Darren Owen
  • Donating the webamp NPM module name: Dave Eddy

Thank you to Justin Frankel and everyone at Nullsoft for Winamp which inspired so many of us.

License

While the Winamp name, interface, and, sample audio file are surely property of Nullsoft, the code within this project is released under the MIT License. That being said, if you do anything interesting with this code, please let me know. I'd love to see it.

You can’t perform that action at this time.