diff --git a/README.md b/README.md index b228da6b..2a37105f 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ - [![Travis](https://img.shields.io/travis/captbaritone/winamp2-js.svg)]() [![Codecov](https://img.shields.io/codecov/c/github/captbaritone/winamp2-js.svg)]() +[![Travis](https://img.shields.io/travis/captbaritone/winamp2-js.svg)]() [![Codecov](https://img.shields.io/codecov/c/github/captbaritone/winamp2-js.svg)]() # Winamp2-js @@ -15,14 +15,14 @@ supported](http://caniuse.com/#feat=audio-api). ## Features -- Decodes the actual skin file in your browser so you can load your favorite +* Decodes the actual skin file in your browser so you can load your favorite Winamp 2 skins! -- Load local audio or skin files via drag-and-drop, eject button, or "options" +* Load local audio or skin files via drag-and-drop, eject button, or "options" button (upper left-hand corner) -- Both visualization modes: oscilloscope and spectrum -- Hotkeys -- "Shade" mini-mode -- "Doubled" mode, where the main window is twice as large: `Ctrl-D` +* Both visualization modes: oscilloscope and spectrum +* Hotkeys +* "Shade" mini-mode +* "Doubled" mode, where the main window is twice as large: `Ctrl-D` A more detailed list of features can be found in [features.md](./features.md). @@ -45,7 +45,7 @@ Create a DOM element somewhere in your HTML document: Initialize Winamp2-js in your JavaScript: -``` +```JavaScript import 'babel-polyfill'; import Winamp from 'winamp2-js'; @@ -58,13 +58,11 @@ const winamp = new Winamp({ url: "https://d38dnrh1liu4f5.cloudfront.net/projects/winamp2-js/skins/base-2.91.wsz" } }); -winamp.render(document.getElementById('winamp2-js')); - -// In response to a user selecting a track from your UI: -winamp.loadTrackUrl(url, name); +// Render after the skin has loaded. +winamp.renderWhenReady(document.getElementById('winamp2-js')); ``` -*Notes:* +_Notes:_ * This should not be considered "production" code. * Winamp2-js does not support Internet Explorer. @@ -110,41 +108,40 @@ There are some "feature flags" which you can manipulate by passing a specially c * `hideAbout` (boolean) Selectively hide the byline and GitHub link at the bottom of the page. Useful for taking screenshots. * `initialState` (object) Override the [initial Redux state](js/reducers.js). 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. - +**Note:** These are intended mostly as development tools and are subject to change at any time. ## Reference -- [skinspecs.pdf](http://members.xoom.it/skinart/tutorial/skinspecs..pdf) -- [Skinner's Atlas 1.5 by Jellby](http://forums.winamp.com/showthread.php?p=951257) -- [Winamp Skinning Tutorial](http://people.xmms2.org/~tru/promoe/Winamp_skinning_tutorial_1_5_0.pdf) -- Sacrat Skinning tutorial parts [1](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%201.htm), [2](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%202.htm), [3](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%203.htm), [4](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%204.htm), and [5](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%205.htm), -- [Winamp Wiki](http://wiki.winamp.com/wiki/Creating_Classic_Skins) +* [skinspecs.pdf](http://members.xoom.it/skinart/tutorial/skinspecs..pdf) +* [Skinner's Atlas 1.5 by Jellby](http://forums.winamp.com/showthread.php?p=951257) +* [Winamp Skinning Tutorial](http://people.xmms2.org/~tru/promoe/Winamp_skinning_tutorial_1_5_0.pdf) +* Sacrat Skinning tutorial parts [1](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%201.htm), [2](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%202.htm), [3](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%203.htm), [4](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%204.htm), and [5](http://www.hugi.scene.org/online/hugi26/hugi%2026%20-%20graphics%20skinning%20sacrat%20winamp%20skinning%20tutorial%20-%205.htm), +* [Winamp Wiki](http://wiki.winamp.com/wiki/Creating_Classic_Skins) ## Predecessors -- [Webamp2x](http://forums.winamp.com/showthread.php?threadid=91850) An +* [Webamp2x](http://forums.winamp.com/showthread.php?threadid=91850) An impressive implementation from 2002(!). - -- [JsAmp](http://freecog.net/2005/jsamp/demo/MainWindow.xhtml) An implementation from 2005 by @twm (via [Hacker News](https://news.ycombinator.com/item?id=15317723)). -- [LlamaCloud Comp](https://vimeo.com/20149683) From 2011 by [Lee Martin](http://www.leemartin.com/) (via [Twitter](https://twitter.com/leemartin/status/910235793737814017)) +* [JsAmp](http://freecog.net/2005/jsamp/demo/MainWindow.xhtml) An implementation from 2005 by @twm (via [Hacker News](https://news.ycombinator.com/item?id=15317723)). -- [Winamp em HTML5 e Javascript](http://www.tidbits.com.br/winamp-em-html5-e-javascript) +* [LlamaCloud Comp](https://vimeo.com/20149683) From 2011 by [Lee Martin](http://www.leemartin.com/) (via [Twitter](https://twitter.com/leemartin/status/910235793737814017)) + +* [Winamp em HTML5 e Javascript](http://www.tidbits.com.br/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](http://cggaurav.github.io/juicydrop/) An HTML5 implementation with +* [JuicyDrop](http://cggaurav.github.io/juicydrop/) An HTML5 implementation with less empasis on being true to the skin, but fully featured visualizations. @cggaurav is keeping it alive on [GitHub](https://github.com/cggaurav/juicydrop) -- [Spotiamp](http://spotiamp.com/) The folks at Spotify reimplemented Winamp as +* [Spotiamp](http://spotiamp.com/) The folks at Spotify reimplemented Winamp as a frontend for Spotify. Not in a browser, and only runs on Windows. ## Thanks -- Research and feature prototyping: @PAEz +* Research and feature prototyping: @PAEz Thank you to [Justin Frankel](http://www.1014.org/) and everyone at Nullsoft for Winamp which inspired so many of us.