Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/cocreating/4StemPlayer/llms.txt

Use this file to discover all available pages before exploring further.

4Stem Band Player loads a static song catalog, decodes multiple MP3 stems directly in the browser, and lets you rehearse or inspect any song with transport controls, per-stem mixing, waveform seeking, chord charts, lyrics, and section navigation. It runs entirely as a static site — no backend, no auth, no build-time server needed.

Introduction

Learn what 4Stem Band Player does and how it works at a high level.

Quickstart

Clone, install, and run the player locally in minutes.

Adding Songs

Learn how to add your own songs and stems to the player catalog.

Deployment

Deploy the static build to Vercel or any static hosting provider.

What the Player Does

4Stem Band Player decodes up to seven stems per song — vocals, guitar, strings, drums, bass, fx, and other — and keeps them perfectly synchronized during playback and seeking. Every stem has its own waveform display, mute/solo toggle, and volume fader. A global transport gives you play, pause, stop, and seek. The Space bar toggles play/pause from anywhere on the page.

Transport Controls

Play, pause, stop, seek, and navigate song sections.

Stem Mixer

Per-stem mute, solo, volume, and live waveform interaction.

Transpose & Tempo

Shift pitch globally with SoundTouch — real-time on desktop, pre-rendered on mobile.

Lyrics & Chords

Synchronized lyrics viewer and structured chord chart display.

Key Features

Offline PWA

Install to your home screen and play any previously loaded song without a connection.

Lite Mode

Mono/22 kHz decode cuts memory use by ~75% on phones so tabs don’t get evicted.

Lock-Screen Controls

Media Session integration lets you control playback from the lock screen or Bluetooth headset.

Song Data at a Glance

Songs live under static/songs/<Folder>/. Each folder needs a song.json metadata file, a lyrics.md file, and at minimum the three required MP3 stems: bass, drums, and vocals. Optional stems are discovered automatically.
1

Create a song folder

Add a new folder under static/songs/ with a URL-safe name like MyNewSong.
2

Add song.json and lyrics.md

Provide title, artist, key, BPM, time signature, optional chords, and section markers.
3

Add MP3 stems

Place at least bass, drums, and vocals stems. Optional stems are auto-discovered.
4

Run songs:prepare

npm run songs:prepare validates, generates waveform peaks, and regenerates the manifest.
The full ingestion process, including waveform peak generation and release validation, is covered in Adding Songs.

Build docs developers (and LLMs) love