Musiquizer

A browser-based lead sheet creator and library manager for musicians.

Write, edit, save, and perform from lead sheets using a clean plain-text format (.lead). Hover over any chord to see a piano diagram and hear it played. Transpose on the fly. Build your own library.

---

Features

• Lead sheet editor with live syntax highlighting
• Preview mode renders chord symbols above lyrics with colour coding
• Chord audio playback via Salamander Grand Piano samples (Tone.js)
• Piano chord diagrams on hover
• Transposition — shift any song up or down by semitone
• Song library with full-text search
• Chord database — 357 pre-generated chords across 21 types and all 12 roots
• Auto-save drafts to localStorage every 30 seconds
• Light and dark themes
• Keyboard shortcuts for all major actions
• Import existing .lead files in bulk

---

Requirements

• Node.js v16 or later
• npm (included with Node.js)

---

Installation

1. Clone the repository

git clone https://github.com/yourusername/musiquizer.git
cd musiquizer

2. Install backend dependencies

cd backend
npm install

3. Install frontend dependencies

cd ../frontend
npm install

4. Add the Salamander Piano samples

Chord audio requires the Salamander Grand Piano MP3 samples. These are not included in the repo and must be downloaded separately.

• Download from the Tone.js samples repository
• Place all MP3 files into: frontend/public/samples/salamander/

The folder should contain files named: A0.mp3, C1.mp3, Ds1.mp3, Fs1.mp3, A1.mp3, C2.mp3 ... through C8.mp3

Without the samples, the app will still work fully — chords just won't play audio.

---

Running the App

Musiquizer requires two terminals.

Terminal 1 — start the backend

cd backend
node server.js

You should see:

Musiquizer server running on http://localhost:3001
Library folder: .../backend/library

Terminal 2 — start the frontend

cd frontend
npm start

The app will open at http://localhost:3000

---

First Run

A sample lead sheet is included in backend/library/ to get you started.

To import it (and any other .lead files you add to that folder):

1. Visit http://localhost:3001 in your browser
2. Click Import .lead files from library folder
3. Switch back to http://localhost:3000
4. Click Library — your songs will be there

---

The .lead File Format

Lead sheets are stored as plain-text .lead files. The format is human-readable and easy to write by hand.

File structure

Song Title
Artist Name
Key
Time Signature
Tempo

[lead sheet body]

Body syntax

Syntax	Description	Example
..Chord	Chord marker	..Am7
//Section//	Section label	//Chorus//
++text++	Performance note	++slow down++
|	Bar line	..C | ..G
::x2	Repeat marker	::x2

Example

Leaving Without Saying
Key
Dm
4/4
76
\`\`\`
//Intro//
++moderately slow, let chords breathe++
..Dm | ..Am | ..Bb | ..C  ::x2

//Verse 1//
..Dm                      | ..Am..  
Every light in the window   was off
..Bb                      | ..C..
I stood at the door for a   while
\`\`\`

Chord symbols in preview mode are colour-coded (blue), sections in amber, performance notes in green, and bar lines in grey. Any chord not found in the database is highlighted in red.

---

Keyboard Shortcuts

Shortcut	Action
Ctrl+S	Save song
Ctrl+N	New song
Ctrl+P	Toggle preview / edit
Ctrl+L	Open library
Ctrl+K	Open chord manager
Ctrl+/	Show shortcuts help
Ctrl++	Increase font size
Ctrl+-	Decrease font size
Ctrl+0	Reset font size
Esc	Close modal

---

Project Structure

musiquizer/
├── backend/
│   ├── server.js              Express API server (port 3001)
│   ├── database.js            Song library JSON database
│   ├── chords-database.js     Chord database + generation logic
│   └── library/               .lead files (one per song)
│
└── frontend/
    └── src/
        ├── App.js                     Main React component
        ├── components/
        │   └── PianoChordDiagram.jsx  SVG piano keyboard
        ├── constants/
        │   ├── keys.js                Key names + transpose options
        │   └── themes.js              Light/dark theme definitions
        ├── hooks/
        │   ├── useAutoSave.js         Draft save/restore
        │   ├── useChordAudio.js       Tone.js chord playback
        │   └── useKeyboardShortcuts.js Global keyboard handler
        └── utils/
            ├── leadParser.js          .lead syntax parser
            └── musicTheory.js         Music theory utilities

---

Tech Stack

• Frontend: React 18, Tone.js, Tailwind CSS
• Backend: Node.js, Express
• Storage: JSON flat files + .lead plain-text files

---

Status

Alpha. Core features are complete and stable. Bundling as an Electron package is planned for a future release.

---

License

MIT — do what you like with it, just don't claim you wrote the Salamander samples.