Matriarx Album Builder

Create elegant, fully self-contained HTML music players that feel premium and perform reliably. Features include per-track link or download buttons, persistent playback across tabs with global mute/pause, circle or square artwork styling, an optional multi-page Album Booklet, embedded lyrics in a clean modal, custom accent colors with live preview, selectable fonts, flexible layout options, and Off-Grid offline playback when your hosting supports it. All project data is saved locally in your browser — nothing is sent to our servers, keeping your work fully private.

Quick Start Walkthrough

Recent Projects & Top Actions
Start fresh with + New Project or load a previous session. Use the Tools ▾ menu to export projects for backup or import existing player HTML.
Album Globals
Define your Album Title, Subtitle, and Credits/Comments. Click the refresh icon next to the duration field to auto-calculate total album playtime from your MP3 files.
Appearance & Identity
Choose your Primary Accent Color (live preview) and typography. Adjust alignment, playlist height, background opacity, and other visual settings to match your site.
Artwork & Icons
Add your main album cover (1:1 square recommended). Select circle or rounded-square styling and customize the track link / download icons if desired.
Adding Tracks
Add tracks with Title, Artist, direct MP3 URL (live preview), optional per-track artwork, link buttons, and lyrics. Reorder using the ▲/▼ controls or delete as needed.
Album Booklet & Extras
Enable the Album Booklet to include a multi-page image gallery. Add an optional secondary "Featured Link" button for external pages (Bandcamp, merch, etc.).
Off-Grid (Offline) Mode
Enable this for playback even without internet. Requires direct MP3 URLs with proper CORS headers (ETag, Last-Modified, Content-Length exposed).

Key Thoughtful Features:

  • Smart Resume — Remembers the last track and exact playback position when users return.
  • Pop-out Player — One-tap button opens the player in a clean floating window.
  • Artwork Lightbox — Tap the album cover to open a full-screen lightbox view.
  • Lyrics Modal — Supports basic HTML (you can add formatted text, links, or small images).
  • Flexible Booklet — Button can appear in header, footer, or both; hide on mobile if preferred.
  • Custom Icons — Override default link and download icons with your own images.
  • Off-Grid Intelligence — Automatically checks for updated tracks and self-heals failed downloads within 24 hours.
  • Global Sync — Mutes other audio/video on the page when this player is active.

Generating the Player

  1. Click Generate, Save & Copy at the bottom of the builder.
  2. This produces a single self-contained HTML block (style + player + script).
  3. The same code can be pasted back into the builder anytime to re-import, edit, and generate a new version — so your published players also act as editable backups.
  4. Paste the code into any webpage or CMS where you want the player to appear.
The generated player has zero external dependencies and works reliably on any modern website.

Helpful Tips

  • Total Privacy: All data stays in your browser. Use Tools → Export Projects (JSON) to create a local backup file.
  • Direct MP3 Links: Use clean .mp3 URLs for best playback, progress bar accuracy, and offline support.
  • Inherited Artwork: Leave a track’s cover field blank to automatically use the main album cover.
  • Global Sync: When enabled, the player mutes other audio/video on the page for a cleaner experience.
Matriarx Album Builder
All project data is private and stored locally on your machine.
Detailed Setup & CORS Instructions →