### Install and Start Development Server

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/README.md

Installs dependencies, builds the library, and starts a local development server with hot reloading. Use pnpm for package management.

```bash
cd webamp
cd packages/webamp
pnpm install
pnpm start
```

--------------------------------

### Install and Start Webamp Modern

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-modern/README.md

Instructions for installing dependencies and starting the webamp-modern project using pnpm.

```bash
cd packages/webamp-modern
pnpm
pnpm start
```

--------------------------------

### Clone and Open Webamp Example

Source: https://github.com/captbaritone/webamp/blob/master/examples/multipleMilkdropPresets/README.md

Instructions for cloning the Webamp repository and opening the multiple Milkdrop presets example in a browser.

```bash
$ git clone git@github.com:captbaritone/webamp.git
$ cd webamp
$ open examples/multipleMilkdropPresets/index.html
```

--------------------------------

### Clone and Run Minimal Example

Source: https://github.com/captbaritone/webamp/blob/master/examples/minimalWindowLayout/README.md

Clone the Webamp repository, navigate to the minimal window layout example directory, and open the HTML file in your browser to see the initial layout.

```bash
$ git clone git@github.com:captbaritone/webamp.git
$ cd webamp
$ open examples/minimalWindowLayout/index.html
```

--------------------------------

### Clone Webamp and Open Example

Source: https://github.com/captbaritone/webamp/blob/master/examples/minimal/README.md

Clone the Webamp repository from GitHub and open the minimal example's HTML file in your browser to run Webamp.

```bash
$ git clone git@github.com:captbaritone/webamp.git
$ cd webamp
$ open examples/minimal/index.html
```

--------------------------------

### Clone and Open Minimal Milkdrop Example

Source: https://github.com/captbaritone/webamp/blob/master/examples/minimalMilkdrop/README.md

Clone the Webamp repository and open the minimal Milkdrop example HTML file in your browser.

```bash
$ git clone git@github.com:captbaritone/webamp.git
$ cd webamp
$ open examples/minimalMilkdrop/index.html
```

--------------------------------

### Start Local Development Server

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/README.md

Starts a local development server that reflects changes live without requiring a restart.

```bash
pnpm start
```

--------------------------------

### Clone Webamp Repository and Open Example

Source: https://github.com/captbaritone/webamp/blob/master/examples/multipleTracks/README.md

Clone the Webamp repository and open the multiple tracks example HTML file in your browser to see Webamp in action.

```bash
$ git clone git@github.com:captbaritone/webamp.git
$ cd webamp
$ open examples/multipleSkins/index.html
```

--------------------------------

### Install Bundle Size Dependencies

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/07_guides/03_bundle-size.md

Install the necessary dependencies for lazy loading JSZip and music-metadata.

```bash
npm install jszip music-metadata
```

--------------------------------

### Install Winamp EQF Package

Source: https://github.com/captbaritone/webamp/blob/master/packages/winamp-eqf/README.md

Install the winamp-eqf package using npm.

```bash
npm install --save winamp-eqf
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/README.md

Use this command to install project dependencies.

```bash
pnpm
```

--------------------------------

### Develop a Specific Package with Turborepo

Source: https://github.com/captbaritone/webamp/blob/master/README.md

Starts the development server for a specific package and its dependencies, using the 'webamp' package as an example. This command is useful for focused development.

```bash
npx turbo dev --filter="webamp"
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/captbaritone/webamp/blob/master/README.md

Installs all project dependencies using pnpm. Ensure pnpm is installed globally before running.

```bash
pnpm install
```

--------------------------------

### Initialize Webamp with Milkdrop

Source: https://github.com/captbaritone/webamp/blob/master/examples/minimalMilkdrop/index.html

Import Webamp with the Butterchurn entrypoint to enable the Milkdrop visualizer. This example initializes Webamp with a track and renders it when ready.

```javascript
import Webamp from "https://unpkg.com/webamp@^2/butterchurn";

const webamp = new Webamp({
  initialTracks: [
    {
      metaData: {
        artist: "DJ Mike Llama",
        title: "Llama Whippin' Intro",
      },
      // NOTE: Your audio file must be served from the same domain as your HTML
      // file, or served with permissive CORS HTTP headers:
      // https://docs.webamp.org/docs/guides/cors
      url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
      duration: 5.322286,
    },
  ],
});

webamp.renderWhenReady(document.getElementById("app"));
```

--------------------------------

### Install Webamp via NPM

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/02_install.md

Use this command to install the Webamp package as a dependency in your project.

```bash
npm install --save webamp
```

--------------------------------

### Run Development Server

Source: https://github.com/captbaritone/webamp/blob/master/packages/skin-museum-og/README.md

Execute this command in your terminal to start the Next.js development server. Open http://localhost:3000 in your browser to view the application.

```bash
pnpm dev
```

--------------------------------

### Import Webamp with Lazy Loading

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/00_entrypoints.md

This entrypoint optimizes for fast initial loads by omitting heavy dependencies like Butterchurn, JSZip, and music-metadata. These are loaded on demand when needed. Requires a sophisticated bundler setup.

```typescript
import Webamp from "webamp/lazy";
```

--------------------------------

### Install ani-cursor Package

Source: https://github.com/captbaritone/webamp/blob/master/packages/ani-cursor/README.md

Install the ani-cursor library using npm. This command adds the package to your project's dependencies.

```bash
npm install ani-cursor
```

--------------------------------

### Custom Media Implementation Example

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/05_custom-media-impl.md

Define a class that implements the `IMedia` interface and pass it to the Webamp constructor using `__customMediaClass`. Refer to Webamp's TypeScript types for the `IMedia` interface details.

```typescript
import Webamp from "webamp";

class MyCustomMediaImpl {
  // Add methods such as seeking, volume control, etc.
}

const webamp = new Webamp({
  // ... other options
  __customMediaClass: MyCustomMediaImpl,
});

webamp.renderWhenReady(document.getElementById("winamp-container"));
```

--------------------------------

### Import Webamp in JavaScript (NPM)

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/02_install.md

Import Webamp into your JavaScript code after installing it via NPM.

```javascript
import Webamp from "webamp/butterchurn";
// ... use Webamp here
```

--------------------------------

### Set Tracks and Play

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Replace the entire playlist with a new array of tracks and start playing the first one. Ensure track URLs are served with correct CORS headers.

```typescript
webamp.setTracksToPlay([
  { url: "https://example.com/track1.mp3" },
  { url: "https://example.com/track2.mp3" },
  { url: "https://example.com/track3.mp3" },
]);
```

--------------------------------

### windowLayout

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Since [v2.0.0](../12_changelog.md#200), an object representing the initial layout of the windows. Valid keys are `main`, `equalizer`, `playlist`, and `milkdrop`. Omitted windows will start hidden.

```APIDOC
### `windowLayout`

**Since** [v2.0.0](../12_changelog.md#200)

An object representing the initial layout of the windows. Valid keys are `main`, `equalizer`, `playlist`, and `milkdrop`. Omitted windows will start hidden.

- Each provided window must specify a `position` object with `top` and `left` which specify pixel offsets.
- Each provided window, except for `milkdrop`, may specify a `shadeMode` boolean.
- Each provided window may specify a `closed` boolean.
- The playlist and milkdrop windows may specify a `size` object with `extraHeight` and `extraWidth`. These numbers represent the number of additional sprites by which to expand the window.

**Note:** After windows are positioned, they are then centered _as a group_ within the DOM element that Webamp is rendered into.

```ts
const webamp = new Webamp({
  windowLayout: {
    main: {
      position: { top: 0, left: 0 },
      shadeMode: true,
      closed: false,
    },
    equalizer: {
      position: { top: 0, left: 0 },
      shadeMode: true,
      closed: false,
    },
    playlist: {
      position: { top: 0, left: 0 },
      shadeMode: true,
      // Number of additional sprites by which to expand the window.
      size: { extraHeight: 1, extraWidth: 10 },
      closed: false,
    },
  },
  // ...other config options
});
```
```

--------------------------------

### Combine Border, Titlebar, and Main Area Masks

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/js/__tests__/fixtures/region.txt

This example combines the titlebar mask, the main inner area mask, and the single green line border mask into one definition. 'NumPoints' lists the count for each polygon in order.

```plaintext
;OK, as the final touch lets add lets the border we just made to the other two.
;You should be able to work this out on your own
[Normal]
NumPoints = 4, 4, 8
PointList = 0,1, 275,1, 275,14, 0,14,     3,15, 272,15, 272,113, 3,113,     1,14, 2,14, 2,114, 273,114, 273,14, 274,14, 274,115, 1,115
```

--------------------------------

### Maki Class Declarations

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-modern/src/maki/maki-bytecode.md

Examples of external class declarations in Maki, including GUIDs and inheritance. These define the available types within the scripting environment.

```maki
extern class @{51654971-0D87-4a51-91E3-A6B53235F3E7}@ @{00000000-0000-0000-0000-000000000000}@ Object;
extern class @{D6F50F64-93FA-49b7-93F1-BA66EFAE3E98}@ Object _predecl System;
extern class @{E90DC47B-840D-4ae7-B02C-040BD275F7FC}@ Object Container;
deprecated extern class @{00C074A0-FEA2-49a0-BE8D-FABBDB161640}@ Object Wac;
```

--------------------------------

### Build Optimized Demo Site

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/demo/readme.md

Run this command to create an optimized build of the demo site for production.

```bash
pnpm run build
```

--------------------------------

### Serve Optimized Build Locally

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/demo/readme.md

After building, use this command to test the optimized build locally. Access the site via the console output IP/port.

```bash
pnpm run serve
```

--------------------------------

### Initialize Webamp with Multiple Skins and Tracks

Source: https://github.com/captbaritone/webamp/blob/master/examples/multipleSkins/index.html

Use this snippet to configure Webamp with a list of available skins, set an initial skin, and load initial audio tracks. Ensure that audio files are served from the same domain or with permissive CORS headers.

```javascript
import Webamp from "https://unpkg.com/webamp@^2";

const webamp = new Webamp({
  // Optional. An array of objects representing skins.
  // These will appear in the "Options" menu under "Skins".
  // NOTE: These URLs must be served with the correct CORs headers.
  // https://docs.webamp.org/docs/guides/cors
  availableSkins: [
    {
      url: "https://archive.org/cors/winampskin_Zelda_Amp/Zelda-Amp.wsz",
      name: "Zelda Amp",
    },
    {
      url: "https://archive.org/cors/winampskin_Green-Dimension-V2/Green-Dimension-V2.wsz",
      name: "Green Dimension V2",
    },
    {
      url: "https://archive.org/cors/winampskin_mac_os_x_1_5-aqua/mac_os_x_1_5-aqua.wsz",
      name: "Mac OSX v1.5 (Aqua)",
    },
  ],
  initialSkin: {
    url: "https://archive.org/cors/winampskin_Zelda_Amp/Zelda-Amp.wsz",
  },
  initialTracks: [
    {
      metaData: {
        artist: "DJ Mike Llama",
        title: "Llama Whippin' Intro",
      },
      // NOTE: Your audio file must be served from the same domain as your HTML
      // file, or served with permissive CORS HTTP headers:
      // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
      url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
      duration: 5.322286,
    },
  ],
});

// Returns a promise indicating when it's done loading.
webamp.renderWhenReady(document.getElementById("app"));
```

--------------------------------

### Get Player Media Status

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Get the detailed playback status of the player, including states like 'ENDED' or 'CLOSED'.

```typescript
const playerStatus = webamp.getPlayerMediaStatus();
if (playerStatus === "ENDED") {
  console.log("Playlist has ended");
} else if (playerStatus === "CLOSED") {
  console.log("Player is closed");
}
```

--------------------------------

### Import Webamp (Legacy)

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/00_entrypoints.md

This legacy entrypoint includes JSZip and music-metadata but omits Butterchurn, allowing for a Webamp instance with the Milkdrop visualizer disabled. It serves as a middle ground between the full and lazy entrypoints.

```typescript
import Webamp from "webamp";
```

--------------------------------

### Complex Combined Mask Example (Commented Out)

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/js/__tests__/fixtures/region.txt

This commented-out example shows a very complex combination of multiple masks, indicated by a long list of 'NumPoints' and a corresponding 'PointList'. It serves as a reference for extensive mask definitions.

```plaintext
; Justin's whacked trans skin :) in one, big lame messy line
; [Normal] 
; NumPoints=20,4,4,4,8,4,4,6,6,4,4,4,4

```

--------------------------------

### Initialize Webamp with Initial Tracks

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Prepopulates the playlist with specified tracks. Ensure the `url` is served with correct CORS headers. Providing `metaData` and `duration` is recommended to prevent Webamp from fetching file metadata.

```ts
const webamp = new Webamp({
  initialTracks: [
    {
      url: "./path/to/track.mp3",
      metaData: {
        artist: "Artist Name",
        title: "Track Title",
      },
      duration: 120, // Track duration in seconds
    },
  ],
  // ...other config options
});
```

--------------------------------

### Initialize Webamp with Tracks

Source: https://github.com/captbaritone/webamp/blob/master/examples/minimal/index.html

Use this snippet to create a new Webamp instance and load initial audio tracks. Ensure audio files are served from the same domain or have permissive CORS headers.

```javascript
import Webamp from "https://unpkg.com/webamp@^2/butterchurn";

const webamp = new Webamp({
  initialTracks: [
    {
      metaData: {
        artist: "DJ Mike Llama",
        title: "Llama Whippin' Intro",
      },
      // NOTE: Your audio file must be served from the same domain as your HTML
      // file, or served with permissive CORS HTTP headers:
      // https://docs.webamp.org/docs/guides/cors
      url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
      duration: 5.322286,
    },
    {
      metaData: {
        artist: "Some Artist",
        title: "Title of Second Track",
      },
      url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
      duration: 5.322286,
    },
  ],
});

webamp.renderWhenReady(document.getElementById("app"));
```

--------------------------------

### getMediaStatus

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Get the current playback status of the player.

```APIDOC
## getMediaStatus(): MediaStatus | null

### Description
Get the current "playing" status. The return value is one of: `"PLAYING"`, `"STOPPED"`, or `"PAUSED"`.

### Method
`getMediaStatus`

### Parameters
None

### Request Example
```javascript
const isPlaying = webamp.getMediaStatus() === "PLAYING";
```

### Response
#### Success Response
- **MediaStatus | null** - The current media status (`"PLAYING"`, `"STOPPED"`, `"PAUSED"`) or `null` if no media is loaded.

### Metadata
**Since** [v1.4.0](../12_changelog.md#140)
```

--------------------------------

### getPlayerMediaStatus

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Get the detailed current playback status of the player.

```APIDOC
## getPlayerMediaStatus(): PlayerMediaStatus

### Description
Get the current "playing" status of the player. Similar to `getMediaStatus()`, but can differentiate between different reasons why the player might not be playing, such as "ENDED" when the end of the playlist has been reached or "CLOSED" when the player has been closed.

The return value is one of: `"PLAYING"`, `"STOPPED"`, `"PAUSED"`, `"ENDED"`, or `"CLOSED"`.

### Method
`getPlayerMediaStatus`

### Parameters
None

### Request Example
```javascript
const playerStatus = webamp.getPlayerMediaStatus();
if (playerStatus === "ENDED") {
  console.log("Playlist has ended");
} else if (playerStatus === "CLOSED") {
  console.log("Player is closed");
}
```

### Response
#### Success Response
- **PlayerMediaStatus** - The current player media status (`"PLAYING"`, `"STOPPED"`, `"PAUSED"`, `"ENDED"`, or `"CLOSED"`).

### Metadata
**Since** [v2.2.0](../12_changelog.md#220)
```

--------------------------------

### Initialize Webamp Instance

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/03_initialization.md

Instantiate Webamp with optional configuration and render it into the container once the skin has loaded. The container element is identified by its ID.

```typescript
import Webamp from "webamp";

// All configuration options are optional.
const webamp = new Webamp({
  // ... optional initialization options like initial tracks, skin, etc. can be
  // supplied here.
});

// Render after the skin has loaded.
webamp.renderWhenReady(document.getElementById("winamp-container"));
```

--------------------------------

### Get Playlist Tracks

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Retrieve the entire current playlist as an array of track objects.

```typescript
const tracks = webamp.getPlaylistTracks();
console.log(`Playlist has ${tracks.length} tracks`);
```

--------------------------------

### Initialize Webamp with Available Skins

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Defines a list of available skins that will appear in the 'Options' menu. Ensure skin URLs are served with correct CORS headers.

```ts
const webamp = new Webamp({
  availableSkins: [
    { url: "./green.wsz", name: "Green Dimension V2" },
    { url: "./osx.wsz", name: "Mac OSX v1.5 (Aqua)" },
  ],
  // ...other config options
});
```

--------------------------------

### Build the NPM Library

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/README.md

Builds the Webamp NPM module. Output files are written to the './built' directory.

```bash
pnpm run build-library
```

--------------------------------

### Get Media Status

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Retrieve the current playback status of the player. This can be 'PLAYING', 'STOPPED', or 'PAUSED'.

```typescript
const isPlaying = webamp.getMediaStatus() === "PLAYING";
```

--------------------------------

### Set Current Track by Index

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Set the currently active track in the playlist using its zero-based index. Playback will start if the player is not paused.

```typescript
// Play the third track in the playlist
webamp.setCurrentTrack(2);
```

--------------------------------

### Initialize Webamp Instance

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Construct a new Webamp instance with optional configuration.

```typescript
import Webamp from "webamp";

const webamp = new Webamp({
  // ... options
});
```

--------------------------------

### Import Webamp with Butterchurn

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/00_entrypoints.md

Use this entrypoint for a fully featured Webamp, including the Milkdrop visualizer. It's recommended when bundle size is not a primary concern.

```typescript
import Webamp from "webamp/butterchurn";
```

--------------------------------

### Define Inner Area Mask

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/js/__tests__/fixtures/region.txt

This example defines a mask for the area inside the outer ring, excluding the titlebar and edges. It uses a simple four-point polygon.

```plaintext
;Now lets define JUST the area sort of inside the outer ring
[Normal]
NumPoints = 4
PointList = 3,15,  272,15,  272,113,  3,113
```

--------------------------------

### Define Basic Outer Border Mask

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/js/__tests__/fixtures/region.txt

This example defines the outer border of the skin, including some cutouts on the top and edges. Ensure 'NumPoints' is updated last.

```plaintext
;This does the outside border, and chops some bits out on the top and edges
[Normal]
NumPoints=8    ;Do this LAST!
PointList=0,1,  275,1,  275,14,  274,14,  274,115,  1,115,  1,14,  0,14  
```

--------------------------------

### Initialize Webamp with Custom Window Layout

Source: https://github.com/captbaritone/webamp/blob/master/examples/minimalWindowLayout/index.html

Use the `windowLayout` option to define the initial state and position of Webamp's main, equalizer, and playlist windows. This allows for pre-configured layouts on startup.

```javascript
import Webamp from "https://unpkg.com/webamp@^2";

const webamp = new Webamp({
  windowLayout: {
    main: {
      position: { top: 0, left: 0 },
      shadeMode: true,
      closed: false,
    },
    equalizer: {
      position: { top: 230, left: 0 },
      shadeMode: true,
      closed: false,
    },
    playlist: {
      position: { top: 28, left: 0 },
      shadeMode: false,
      size: {
        extraHeight: 3,
        extraWidth: 11,
      },
      closed: false,
    },
  },
  enableDoubleSizeMode: true,
});

// Returns a promise indicating when it's done loading.
webamp.renderWhenReady(document.getElementById("app"));
```

--------------------------------

### Initialize Webamp with File Pickers

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Adds custom file pickers to the 'Play' menu, allowing integration with external services. Each picker requires a context menu name, a function to retrieve tracks, and a flag indicating network requirement.

```ts
const webamp = new Webamp({
  filePickers: [
    {
      contextMenuName: "My File Picker...",
      filePicker: () =>
        Promise.resolve([
          {
            url: "./rick_roll.mp3",
          },
        ]),
      requiresNetwork: true,
    },
  ],
  // ...other config options
});
```

--------------------------------

### Initialize Webamp with Window Layout

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Configures the initial layout and state of Webamp windows. Each window can have its position, shade mode, and closed state defined. Playlist and Milkdrop windows also support size adjustments.

```ts
const webamp = new Webamp({
  windowLayout: {
    main: {
      position: { top: 0, left: 0 },
      shadeMode: true,
      closed: false,
    },
    equalizer: {
      position: { top: 0, left: 0 },
      shadeMode: true,
      closed: false,
    },
    playlist: {
      position: { top: 0, left: 0 },
      shadeMode: true,
      // Number of additional sprites by which to expand the window.
      size: { extraHeight: 1, extraWidth: 10 },
      closed: false,
    },
  },
  // ...other config options
});
```

--------------------------------

### Initialize Webamp with Custom Milkdrop Presets

Source: https://github.com/captbaritone/webamp/blob/master/examples/multipleMilkdropPresets/index.html

Instantiate Webamp with initial tracks and a function to load custom Milkdrop presets. Ensure you are using a pre-release version of Webamp for this feature.

```javascript
import Webamp from "https://unpkg.com/webamp@0.0.0-next-41cfbbb/butterchurn";

const webamp = new Webamp({
  initialTracks: [
    {
      metaData: {
        artist: "DJ Mike Llama",
        title: "Llama Whippin' Intro",
      },
      // NOTE: Your audio file must be served from the same domain as your HTML
      // file, or served with permissive CORS HTTP headers:
      // https://docs.webamp.org/docs/guides/cors
      url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
      duration: 5.322286,
    },
  ],
  requireButterchurnPresets() {
    return [
      {
        name: "md_AdamFX_Enterz_Tha_Mash_With_Martin_stahlregen_AdamFX_In_Tha_Mash_Effectz_D/md_AdamFX_Enterz_Tha_Mash_With_Martin_stahlregen_AdamFX_In_Tha_Mash_Effectz_D.milk",
        butterchurnPresetUrl: "https://archive.org/cors/md_AdamFX_Enterz_Tha_Mash_With_Martin_stahlregen_AdamFX_In_Tha_Mash_Effectz_D/md_AdamFX_Enterz_Tha_Mash_With_Martin_stahlregen_AdamFX_In_Tha_Mash_Effectz_D.json",
      },
    ];
  },
});

// Returns a promise indicating when it's done loading.
webamp.renderWhenReady(document.getElementById("app"));
```

--------------------------------

### Create a Single Green Line Border Mask

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/js/__tests__/fixtures/region.txt

This advanced example creates a mask for a single green line around the skin's border. Coordinates define transparent space limits when not following the outside edge.

```plaintext
;OK, now lets try something tricky. We are going to make a mask for just one green line around the outside of the skin
;This introduces the other "big thing" with masks. Have a look at the first three co-ordinates below. You can see the first two moves we make are to go one to the side and then go down to the bottom. Looking at the last co-ordinate you can see we will come back up at the end, making a line two wide, right? 
;WRONG!! Here comes the big important phrase.
;IF YOU ARNT FOLLOWING THE OUTSIDE EDGE, YOUR CO-ORDINATES MARK TRANSPARENT SPACE LIMITS
;That's right. Because I don't make a square, because I have to turn "inside" the box, I am only marking space, and what I end up with is a mask with one green line.
;WARNING: Leave your skins dialog open when you do this one. :)
[Normal]
NumPoints = 8
PointList = 1,14,  2,14,  2,114,  273,114,  273,14,  274,14,  274,115,  1,115
```

--------------------------------

### initialTracks

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

An array of [`track`s](./01_track.md) to prepopulate the playlist with. The `url` must be served with the [correct CORS headers](../07_guides/01_cors.md). It is highly recommended to provide `metaData` and `duration` for each track.

```APIDOC
### `initialTracks`

An array of [`track`s](./01_track.md) to prepopulate the playlist with. **The `url` must be served with the [correct CORS headers](../07_guides/01_cors.md).**

:::warning
It is highly recommended to provide `metaData` and `duration` for each track, as this will prevent Webamp from needing to fetch the first few bytes of the file to read ID3 tags and duration.
:::

```ts
const webamp = new Webamp({
  initialTracks: [
    {
      url: "./path/to/track.mp3",
      metaData: {
        artist: "Artist Name",
        title: "Track Title",
      },
      duration: 120, // Track duration in seconds
    },
  ],
  // ...other config options
});
```
```

--------------------------------

### Combine Titlebar and Main Area Masks

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/js/__tests__/fixtures/region.txt

This example combines the titlebar mask and the main inner area mask into a single definition. Note the comma separating the two sets of points and the 'NumPoints' reflecting the count for each polygon.

```plaintext
; Right, so say we want a mask that has, the titlebar AND the main area.
; We just add them together
 [Normal] 
NumPoints = 4, 4  ;Make sure to get the order right(although it doesnt matter here =P )
PointList = 0,1, 275,1, 275,14, 0,14,     3,15, 272,15, 272,113, 3,113
```

--------------------------------

### Initialize Webamp with Hotkeys Enabled

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Enables global hotkeys for Webamp control. Refer to the hotkeys documentation for a list of available shortcuts.

```ts
const webamp = new Webamp({
  enableHotkeys: true,
  // ...other config options
});
```

--------------------------------

### Initialize Webamp with Multiple Tracks

Source: https://github.com/captbaritone/webamp/blob/master/examples/multipleTracks/index.html

Use the `initialTracks` option to provide an array of track objects. Each object requires `metaData` (with `artist` and `title`) and `url`. The `duration` field is also recommended for accurate playlist display. Ensure audio files are served with permissive CORS headers or from the same domain.

```javascript
import Webamp from "https://unpkg.com/webamp@^2";

const webamp = new Webamp({
  initialTracks: [
    {
      metaData: {
        artist: "DJ Mike Llama",
        title: "Llama Whippin' Intro",
      },
      url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
      duration: 5.322286,
    },
    {
      metaData: {
        title: "Heroines",
        artist: "Diablo Swing Orchestra",
      },
      url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Diablo_Swing_Orchestra_-_01_-_Heroines.mp3",
      duration: 322.612245,
    },
    {
      metaData: {
        title: "We Are Going To Eclecfunk Your Ass",
        artist: "Eclectek",
      },
      url: "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Eclectek_-_02_-_We_Are_Going_To_Eclecfunk_Your_Ass.mp3",
      duration: 190.093061,
    },
  ],
});

webamp.renderWhenReady(document.getElementById("app"));
```

--------------------------------

### Deploy Website using SSH

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/README.md

Deploys the website using SSH. Ensure you have SSH access configured.

```bash
USE_SSH=true pnpm deploy
```

--------------------------------

### handleTrackDropEvent

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

An optional function to provide a custom way to derive Track objects from a drop event. Useful if your website has some DOM representation of a track that you can map to a URL/blob. The function should return an array of Track objects or null to get the default drop behavior.

```APIDOC
## `handleTrackDropEvent`

### Description
An optional function to provide a custom way to derive [`Track`](01_track.md) objects from a drop event. Useful if your website has some DOM representation of a track that you can map to a URL/blob.

The function should return an array of [`Track`](01_track.md) objects or `null` to get the default drop behavior.

### Parameters
* `e` (DragEvent) - The drop event object.

### Returns
* `Promise<Array<Track>> | null` - An array of Track objects or null for default behavior.

### Example
```ts
const webamp = new Webamp({
  handleTrackDropEvent: async (e) => {
    return [
      /* array of Tracks */
    ];
  },
  // ...other config options
});
```
```

--------------------------------

### Build Static Website Content

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/README.md

Generates static content for the website into the 'build' directory, ready for hosting.

```bash
pnpm build
```

--------------------------------

### Initialize Webamp with Initial Skin

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Sets the initial skin for Webamp. If omitted, the default skin is used. The skin `url` must be served with correct CORS headers.

```ts
const webamp = new Webamp({
  initialSkin: {
    url: "./path/to/skin.wsz",
  },
  // ...other config options
});
```

--------------------------------

### Initialize Webamp

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Basic initialization of the Webamp class. After construction, `renderWhenReady` can be called to render Webamp.

```ts
import Webamp from "webamp";

const webamp = new Webamp({
  // ...constructor options go here.
});

// ...after this you can call `webamp.renderWhenReady(...)` to render Webamp.
```

--------------------------------

### Parse and Create EQF Files

Source: https://github.com/captbaritone/webamp/blob/master/packages/winamp-eqf/README.md

Import and use the parser and creator functions from the winamp-eqf package. Ensure your .eqf or .q1 file is available as an ArrayBuffer.

```typescript
import { parser, creator, EqfData, CreateEqfData } from "winamp-eqf";

// ... Get your .eqf or .q1 file as an ArrayBuffer
const eqf: EqfData = parser(eqfArrayBuffer);

const eqfArrayBuffer: ArrayBuffer = creator(eqf);
```

--------------------------------

### Webamp Constructor

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

The `Webamp` class is constructed with an options object. All config properties are optional.

```APIDOC
## Webamp Constructor

The `Webamp` class is constructed with an options object. _All config properties are optional._

```ts
import Webamp from "webamp";

const webamp = new Webamp({
  // ...constructor options go here.
});

// ...after this you can call `webamp.renderWhenReady(...)` to render Webamp.
```

For more information on initializing Webamp, see the [Initialization Guide](../03_initialization.md).
```

--------------------------------

### Publish to NPM

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp/README.md

Steps to publish a new version of the Webamp NPM module. This includes updating version numbers, committing changes, and publishing to npm.

```bash
cd packages/webamp
npm publish
```

--------------------------------

### setTracksToPlay

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Replace the playlist with an array of Tracks and begin playing the first track.

```APIDOC
## setTracksToPlay(tracks: Track[]): void

### Description
Replace the playlist with an array of [`Track`s](01_track.md) and begin playing the first track.

### Method
`setTracksToPlay`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **tracks** (Track[]) - Required - An array of track objects to set as the new playlist.

### Request Example
```javascript
webamp.setTracksToPlay([
  { url: "https://example.com/track1.mp3" },
  { url: "https://example.com/track2.mp3" },
  { url: "https://example.com/track3.mp3" },
]);
```

### Response
#### Success Response (void)
This method does not return a value.

### Notes
**The `url` must be served with the [correct CORS headers](../07_guides/01_cors.md).**
```

--------------------------------

### Build All Packages with Turborepo

Source: https://github.com/captbaritone/webamp/blob/master/README.md

Builds all packages in the monorepo, automatically handling dependencies. This command leverages Turborepo's caching for efficiency.

```bash
npx turbo build
```

--------------------------------

### browserIsSupported()

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/04_static-methods.md

Checks if the current browser environment supports the necessary features for Webamp to function. It's recommended to call this before initializing a Webamp instance.

```APIDOC
## browserIsSupported()

### Description
Returns a boolean indicating whether the current browser supports the features that Webamp depends upon. It is recommended to check this before you attempt to construct an instance of `Webamp`.

### Method
`static Webamp.browserIsSupported(): boolean`

### Usage Example
```ts
import Webamp from "webamp";

if (Webamp.browserIsSupported()) {
  new Webamp({
    /* ... */
  });
  // ...
} else {
  // Perhaps you could show some simpler player in this case.
}
```
```

--------------------------------

### enableMediaSession

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/02_webamp-constructor.md

Have Webamp connect to the browser's Media Session API, if the browser supports it. This allows OS/hardware level media controls like play/pause/next/previous and lock screen "current track" information to work with Webamp.

```APIDOC
## `enableMediaSession`

### Description
Have Webamp connect to the browser's [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API), if the browser supports it.
**Default:** `false`.

This allows OS/hardware level media controls like play/pause/next/previous
and lock screen "current track" information to work with Webamp.

### Type
* `boolean`

### Example
```ts
const webamp = new Webamp({
  enableMediaSession: true,
  // ...other config options
});
```
```

--------------------------------

### setSkinFromUrl

Source: https://github.com/captbaritone/webamp/blob/master/packages/webamp-docs/docs/06_API/03_instance-methods.md

Updates the Webamp instance's skin to one specified by a URL. The skin loading is asynchronous. Use `skinIsLoaded()` to be notified when the new skin is ready.

```APIDOC
## `setSkinFromUrl(url: string): void`

### Description
Updates the skin used by the Webamp instance. Note that this does not happen immediately. If you want to be notified when the skin load is complete, use `.skinIsLoaded()`, which returns a promise which you can await.

**Since** [v1.4.1](../12_changelog.md#141)
```