DOCSEARCHbyAlgolia
Submit Docs

Webamp

repository·master·Indexed 11 days ago

https://github.com/captbaritone/webamp

A high-fidelity HTML5 and JavaScript reimplementation of the Winamp media player, featuring full skin support and Milkdrop integration via Butterchurn. The project includes a skin database, a Windows Animated Cursor (.ani) renderer called ani-cursor, and various integration examples for TypeScript, Vite, and Webpack.

Tokens
42K
Snippets
162
Records
226
Agent score
95%

What's inside Webamp

  3. What is the `IMedia` interface?

    master

    The IMedia interface defines the contract required for a custom media player implementation passed via the __customMediaClass configuration property. It includes the methods and properties necessary for Webamp to control playback, such as seeking and volume control.

    To see the exact requirements for your implementation, you should inspect the IMedia type definitions within the Webamp TypeScript types.

  4. Overview of Webamp monorepo packages

    master

    The repository contains several related modules:

    • webamp: The main NPM module for the Winamp emulator.
    • ani-cursor: An NPM module for rendering animated .ani cursors as CSS animations.
    • winamp-eqf: An NPM module for parsing and constructing Winamp equalizer preset files (.eqf).
    • skin-database: The server component for skins.webamp.org.
    • webamp-demo: The demo site hosted at webamp.org.
    • webamp-docs: The documentation site hosted at docs.webamp.org.
    • webamp-modern: A prototype for rendering "modern" Winamp skins.
    • skin-museum-og: A Next.js project.

  5. How window management and dragging works

    master

    Window positions and behaviors are managed by the WindowManager.tsx component.

    Features:

    • Dragging: Any node can become a drag handle by adding the .draggable class.
    • Snapping: Supports snapping windows to each other and to browser edges.
    • Layout Integrity: When switching between "regular", "double", or "shade" modes, the withWindowGraphIntegrity() higher-order action creator ensures windows maintain their relative positions by computing a graph of "touching" windows and recalculating locations based on new sizes.

  6. Capabilities of the Webamp Discord Bot

    master

    The Discord bot integrated with this package provides several administrative and utility functions for managing skins:

    • Reviewing skins: Facilitates the review process for skins intended for use by the Twitter bot.
    • Uploading skins: Allows for the addition of new skins to the database.
    • Screenshot generation: Can generate a screenshot of a specific skin.
    • Skin retrieval: Can retrieve a link or a screenshot of a skin using its unique hash.

  7. How the Equalizer works

    master

    The Equalizer consists of two parts:

    1. Audio: Managed by the Media class.
    2. Visuals: The curved line is calculated using spline.js. The coloring of the line is achieved by extracting a single-pixel-wide sprite from the skin and using CanvasRenderingContext2D.createPattern() to draw the splined line.

    Presets: The equalizer can load and generate .eqf files using the winamp-eqf NPM module.

  8. Use Milkdrop immersive modes

    master

    Milkdrop supports two immersive modes which can be activated by right-clicking on the Milkdrop window and selecting the mode from the context menu:

    • Desktop Mode: The Milkdrop visualization becomes the background for the entire Webamp window. Right-click the background to exit.
    • Full Screen Mode: Milkdrop takes over the entire screen, hiding all other content. Press Esc to exit.

  9. Understand the structure of a .maki file

    master

    Maki is a custom scripting language for modern Winamp skins that compiles to a custom bytecode interpreted by the skin engine. A .maki binary file is composed of several sections in a fixed order. Because there are no section headers, sections must be read sequentially.

    All numbers in the bytecode are little endian.

    Core Sections (Always Present)

    1. Header: Metadata including magic string, version, etc.
    2. Types/Classes: Table of class declarations (GUIDs).
    3. Methods: Table of method declarations.
    4. Variables: Table of variable declarations (acting like registers).
    5. Strings: Initialized string values.
    6. Bindings: Event-listener style connections between variables and methods.
    7. Code: The actual bytecode instructions (opcodes).

    Debug Sections (Only if compiled with /debug flag)

    1. Filepaths: List of source files used during compilation.
    2. Instruction Line Numbers: Mapping of instructions to file/line numbers for debugging.

  10. Access the Webamp Redux store

    master

    Webamp is implemented using Redux. If you need to control aspects of Webamp not exposed via the public API, you can access the Redux store through the Webamp instance.

    Warning: The Redux store is not part of the public API and its structure or action types may change in future versions. Use this at your own risk.

    To discover available actions and inspect the state, it is recommended to use the Redux DevTools browser extension.

  12. How Webamp renders components with React

    master
    Webamp uses react-redux to bind the Redux state to its component tree. Most components are connected using the connect HOC. This architecture ensures that state changes trigger minimal re-renders by allowing components to subscribe only to the specific slices of state they require via performant selectors.