@@ -4,10 +4,15 @@ Here's how to use Webamp in your own project. If you get stuck, or need help, pl
44
55## Examples
66
7- If you would like to look at some examples check out the [ examples directory] ( ../examples/ ) where you will find:
7+ If you would like to look at some examples check out the [ examples directory] ( ../../../ examples/ ) where you will find:
88
9- - [ Minimal] ( ../examples/minimal/ ) - An example that just uses a ` <script> ` tag that points to a CDN. No install required.
10- - [ Webpack] ( ../examples/webpack/ ) - An example that installs Webamp via NPM, and bundles it into an application using Webpack.
9+ - [ Minimal] ( ../../../examples/minimal ) Stick Webamp in a ` <script> ` tag, and add a few lines of JavaScript to get Webamp on your page.
10+ - [ Multiple Tracks] ( ../../../examples/multipleTracks ) An example of setting up Webamp with multiple audio tracks.
11+ - [ Multiple Skins] ( ../../../examples/multipleSkins ) An example of setting up Webamp with multiple skins.
12+ - [ Minimal Window Layout] ( ../../../examples/minimalWindowLayout ) An example of configuring the initial layout of windows in Webamp.
13+ - [ Webpack] ( ../../../examples/webpack ) Install Webamp via NPM and bundle it in a Webpack bundle.
14+ - [ Webpack Lazyload] ( ../../../examples/webpackLazyLoad ) ** In progress**
15+ - [ Minimal Milkdrop] ( ../../../examples/minimalMilkdrop ) ** In progress**
1116
1217Each example has a README which explains it in more detail.
1318
@@ -128,75 +133,118 @@ if(Winamp.browserIsSupported()) {
128133
129134The ` Winamp ` class is constructed with an options object. All are optional.
130135
131- ``` JavaScript
136+ ``` ts
132137const = {
133- // Optional. An object representing the initial skin to use.
134- // If omitted, the default skin, included in the bundle, will be used.
135- // Note: This URL must be served the with correct CORs headers.
136- initialSkin: {
137- url: ' ./path/to/skin.wsz'
138- },
138+ // Optional. An object representing the initial skin to use.
139+ // If omitted, the default skin, included in the bundle, will be used.
140+ // Note: This URL must be served the with correct CORs headers.
141+ initialSkin: {
142+ url: " ./path/to/skin.wsz" ,
143+ },
139144
140- // Optional. An array of `track`s (see above) to prepopulate the playlist with.
141- initialTracks: [/* ... */
142-
143- // Optional. An array of objects representing skins.
144- // These will appear in the "Options" menu under "Skins".
145- // Note: These URLs must be served with the correct CORs headers.
146- availableSkins: [
147- { url: " ./green.wsz" : " Green Dimension V2"
148- { url: " ./osx.wsz" : " Mac OSX v1.5 (Aqua)"
149- ],
150-
151- // Optional. (Default: `false`) Should double size mode be enabled?
152- enableDoubleSizeMode: true ,
153-
154- // Optional. (Default: `false`) Should global hotkeys be enabled?
155- enableHotkeys: true ,
156-
157- // Optional. (Default: `0`) The zIndex that Webamp should use.
158- zIndex: 99999 ,
159-
160- // Optional. An array of additional file pickers.
161- // These will appear in the "Options" menu under "Play".
162- // In the demo site, This option is used to provide a "Dropbox" file
163- // picker.
164- filePickers: [{
165- // The name that will appear in the context menu.
166- contextMenuName: " My File Picker..."
167- // A function which returns a Promise that resolves to
168- // an array of `track`s (see above)
169- filePicker : () => Promise .resolve ([{
170- url: ' ./rick_roll.mp3'
171- }]),
172- // A boolean indicating if this options should be made
173- // available when the user is offline.
174- requiresNetwork: true
175- }],
176-
177- // Optional. Provide a custom way to derive `Track` objects from a drop event.
178- // Useful if your website has some DOM representation of a track that you can map to a URL/blob.
179- handleTrackDropEvent: async (e ) => {
180- // Return an array of `Track` objects, see documentation below, or `null` to get the default drop behavior.
181- // You may optionally wrap the return value in a promise.
182- },
145+ // Optional. An array of `track`s (see above) to prepopulate the playlist with.
146+ initialTracks: [
147+ /* ... */
148+ ],
149+
150+ // Optional. An array of objects representing skins.
151+ // These will appear in the "Options" menu under "Skins".
152+ // Note: These URLs must be served with the correct CORs headers.
153+ availableSkins: [
154+ { url: " ./green.wsz" " Green Dimension V2"
155+ { url: " ./osx.wsz" " Mac OSX v1.5 (Aqua)"
156+ ],
183157
184- // Optional. Provide a way to extend the behavior of the button ADD URL.
185- // **Since** 1.4.1
186- handleAddUrlEvent: async () => {
187- // Return an optional array of `Track` objects or null.
158+ // Optional. An object representing the initial layout of the windows.
159+ // Valid keys are `main`, `equalizer`, `playlist` and `milkdrop`. All windows
160+ // are optional.
161+ //
162+ // - Each provided window must specify a `position` object with `top` and
163+ // `left` which specify pixel offsets.
164+ // - Each provided window, except for
165+ // `milkdrop` may specify a `shadeMode` boolean.
166+ // - Each provided window may specify a `closed` boolean.
167+ // - The playlist and milkdrop windows may specify a `size` object with
168+ // `extraHeight` and `extraWidth`.
169+ //
170+ // **Note:** After windows are positioned, they are then centered _as a group_ within the
171+ // DOM element that Webamp is rendered into.
172+ windowLayout: {
173+ main: {
174+ position: { top: 0 , left: 0 },
175+ shadeMode: true ,
176+ closed: false ,
177+ },
178+ equalizer: {
179+ position: { top: 0 , left: 0 },
180+ shadeMode: true ,
181+ closed: false ,
182+ },
183+ playlist: {
184+ position: { top: 0 , left: 0 },
185+ shadeMode: true ,
186+ // Number of additional sprites by which to expand the window.
187+ size: { extraHeight: 1 , extraHeight: 10 },
188+ closed: false ,
188189 },
190+ },
191+
192+ // Optional. (Default: `false`) Should double size mode be enabled?
193+ // **Note:** In keeping with the original Winamp, double size mode
194+ // does not apply to resizable windows like the equalizer or Milkdrop.
195+ enableDoubleSizeMode: true ,
196+
197+ // Optional. (Default: `false`) Should global hotkeys be enabled?
198+ enableHotkeys: true ,
189199
190- // Optional. Provide a way to extend the behavior of the playlist button LOAD LIST.
191- // **Since** 1.4.1
192- handleLoadListEvent: async () => {
193- // Return an optional array of `Track` objects or null.
200+ // Optional. (Default: `0`) The zIndex that Webamp should use.
201+ zIndex: 99999 ,
202+
203+ // Optional. An array of additional file pickers.
204+ // These will appear in the "Options" menu under "Play".
205+ // In the demo site, This option is used to provide a "Dropbox" file
206+ // picker.
207+ filePickers: [
208+ {
209+ // The name that will appear in the context menu.
210+ contextMenuName: " My File Picker..."
211+ // A function which returns a Promise that resolves to
212+ // an array of `track`s (see above)
213+ filePicker : () =>
214+ Promise .resolve ([
215+ {
216+ url: " ./rick_roll.mp3"
217+ },
218+ ]),
219+ // A boolean indicating if this options should be made
220+ // available when the user is offline.
221+ requiresNetwork: true ,
194222 },
223+ ],
224+
225+ // Optional. Provide a custom way to derive `Track` objects from a drop event.
226+ // Useful if your website has some DOM representation of a track that you can map to a URL/blob.
227+ handleTrackDropEvent : async (e ) => {
228+ // Return an array of `Track` objects, see documentation below, or `null` to get the default drop behavior.
229+ // You may optionally wrap the return value in a promise.
230+ },
231+
232+ // Optional. Provide a way to extend the behavior of the button ADD URL.
233+ // **Since** 1.4.1
234+ handleAddUrlEvent : async () => {
235+ // Return an optional array of `Track` objects or null.
236+ },
237+
238+ // Optional. Provide a way to extend the behavior of the playlist button LOAD LIST.
239+ // **Since** 1.4.1
240+ handleLoadListEvent : async () => {
241+ // Return an optional array of `Track` objects or null.
242+ },
195243
196- // Optional. Provide a way to extend the behavior of the playlist button SAVE LIST.
197- // Where tracks: Track[]
198- // **Since** 1.4.1
199- handleSaveListEvent : (tracks ) => {}
244+ // Optional. Provide a way to extend the behavior of the playlist button SAVE LIST.
245+ // Where tracks: Track[]
246+ // **Since** 1.4.1
247+ handleSaveListEvent : (tracks ) => {},
200248};
201249const = new Webamp (options );
202250```
0 commit comments