Backing Track Maker

A browser-based chord chart player that turns iReal-style charts into practice backing tracks: SoundFont harmony and bass, synced jazz drum loops, tempo and style controls, a local song library, and MP3 export.

This project is fully vibe-coded.

Features

• iReal import — Add tunes from irealbook:// / irealb:// links; parse and load charts in the app.
• Chord chart editing — Edit measures; slot layout follows style and time signature (e.g. swing vs straight).
• Playback engine — Repeat marks (|: / :|), double bars, rehearsal letters, intro/verse labels; D.C./D.S./Coda/Fine behavior (jumps are approximate—verify barlines and drum meter).
• SoundFont audio — Guitar/comp preset (channel 1) and bass (channel 2) via SpessaSynth and a bundled SF2.
• Drum loops — Loops chosen from assets/sounds/drum/ using style, meter, tempo, and section (first / middle / fill, etc.); manifest can be regenerated with a script.
• Mix controls — Levels, chord sustain, bass sustain, optional harmonic color (sus/add flavors).
• My library — Save, update, and delete songs; stored in localStorage for this origin.
• Export — Render the current chart to MP3 (with optional count-in in the export flow).

Requirements

• Node.js 20+ (or current LTS) and npm.

Setup

git clone https://github.com/nimah79/backing-track-maker
cd backing-track-maker
npm install

Develop

The dev script bundles the audio worklet and LameJS stub before starting Next.js:

npm run dev

Open http://localhost:3000. The chart engine expects to be served over HTTP (not opened as a raw file:// page).

Production build

npm run build
npm start

Drum asset manifest

If you add or rename files under assets/sounds/drum/, refresh the manifest the app uses:

npm run drums:manifest

Lint & format

npm run lint
npm run format

Tech stack

• Next.js (App Router), React, TypeScript, Tailwind CSS
• Radix UI primitives (dialogs, etc.)
• ireal-reader, @tonaljs for harmony, [lamejs}(https://github.com/zhuker/lamejs) for MP3 encoding in the browser