MX Album Builder

Create elegant, fully self-contained HTML music players that feel premium and perform reliably. All project data is saved locally in your browser — nothing is sent to our servers, keeping your work private.

Quick Start Walkthrough

Project Management: Start fresh with + New Project or use the Tools ▾ menu to export/import JSON backups of your library.

Album Globals: Define your title and credits. Look for the ⟳ Calculate link to automatically scan your MP3s for total album duration.

Branding & Identity: Check the Appearance block to set your accent color and fonts. Upload a 1:1 cover and choose your preferred shape (Circle/Square).

Tracks & Media: Add tracks using the + Add Track button. Each row allows you to test the audio immediately with a built-in preview player.

Finalize & Export: Review Off-Grid Mode if you need offline support, then hit Generate, Save & Copy to grab your code.

Special Functions

Track Link Buttons: External View vs. Direct Download ▼

Each track row includes a Track Link Button field. This adds a gold-labeled button to the track in the final player.

Standard Mode (Link): Use this to point to a YouTube video, Bandcamp page, or credits. The link opens in a new tab by default.
Download Mode: Tick the File Download checkbox to force the browser to download the file rather than navigating away.
*Perfect for providing the MP3 itself, a high-res PDF of lyrics, or bonus media.
Custom Messaging: Use the Button Message field to label the button (e.g., "Lyrics", "Buy", or "PDF").

Duration Scanning & Track Times (⟳ Calculate) ▼

Within Album Globals, the [ ⟳ Calculate ] button scans every MP3 URL you've provided.

It records the exact length of every song and then updates the Total Album Time field automatically. It also populates the individual durations shown in the playlist.

The Album Booklet System ▼

The Album Booklet acts as a digital liner-notes gallery.

Format: Use square (1:1) images. Min 650px width recommended.
Ordering: Use ▲ and ▼ to set the page order.
Experience: Images appear in a vertical scrolling stack inside a clean modal.

1. Top Controls Reference

Button / Feature	What it does	How to use
+ New Project	Starts a completely fresh album	Click (will ask to confirm if you have unsaved changes)
Duplicate Selected	Creates an exact copy	Click while editing a project
Tools ▾	Access Import / Export tools	Export or import projects as JSON for backup
Import Player HTML	Load settings from a generated player	Paste old code into the box to re-edit

2. Album Globals Details

Setting	What it does	How it appears
Album Title	Main release name	Large title at the top
Album Subtitle	Secondary text (Artist, etc)	Directly below the title
Album Comments	Credits / Liner notes	Paragraph below subtitle (supports bold/links)
Duration Calc	Automatic time scanning	Scans all track MP3s to get the total runtime

3. Appearance & Sizing

Setting	What it does	How it appears
Accent Color	Brand highlight color	Progress bar, buttons, active highlights
Background Opacity	Player transparency	Controls how subtle the backdrop appears
Universal Mute	Syncs page audio	Mutes other page media when this player plays
Sizing Strategy	Responsive vs Fixed	Controls max-width and scrolling behavior

4. Tracks Configuration

Field	Purpose	Special Feature
Title & Artist	Display name	Shown per track in the list
MP3 URL	Direct audio link	Includes a live preview player for testing
Cover Art URL	Per-track artwork	Defaults to the main album cover if left blank
Link Button	Custom action button	Toggle "Download" mode to use this for the track file or bonus goodies.
Lyrics	Song text modal	Shows a clean modal with formatted text (allows links/HTML).

Key Player Features ▼

• Smart Resume: Remembers position.

• Pop-out Player: Floating window.

• Artwork Lightbox: Tap to zoom.

• Global Sync: Mutes other media.

• Self-Healing: Re-downloads failed tracks.

• Zero Dependencies: No external JS libraries.

5. Off-Grid & CORS

Off-Grid mode allows offline playback but requires your host to allow Cross-Origin Requests (CORS).

Required Cloud Setup (R2 / S3) ▼

If you see CORS errors in the console, paste this JSON into your storage bucket settings:

[ { "AllowedOrigins": ["*"], "AllowedMethods": ["GET", "HEAD"], "AllowedHeaders": ["*"], "ExposeHeaders": ["Content-Length", "Range"] } ]

Note: Dropbox and Google Drive links rarely support this; R2 or Bunny.net is recommended.

6. Generate & Export

Click Generate, Save & Copy to produce a standalone HTML block. Paste this code into any Squarespace Code Block or WordPress HTML section.

Pro Tip: Your generated code is your backup. Paste it back into "Import Player HTML" anytime to resume editing.

MX Album Builder · Copyright Lucas Gaudette.
PART OF THE MATRIARX UNIVERSE