midrum

midrum is a React-based performance tool designed to help musicians navigate sheet music, manage setlists, and control cues during live performances.

The project was originally developed for a Norwegian revy production, where musicians must perform many short and long musical numbers spread across an entire show. These pieces often appear with little warning and are difficult to memorize beforehand. midrum solves this by providing a fast interface for navigating a setlist and instantly viewing the correct sheet music, while integrating MIDI control, metronome functionality, and sample playback.

---

Features

Setlist Management

midrum organizes a performance as a table-based setlist where each entry can include:

• Sketch name
• Sketch type
• Musical piece
• Cue text
• BPM
• Time signature
• Count-in information
• Comments
• Linked PDF sheet music

This gives musicians a clear overview of the current number and important performance details during the show.

---

PDF Sheet Music Viewer

Each setlist entry can be linked to a PDF file containing sheet music.

Key capabilities:

• Automatically loads the correct PDF for the selected piece
• Supports page navigation
• Opens sheet music in a separate pop-out window
• Automatic scaling for different monitor orientations

Display behavior:

• Horizontal monitor: fit to height
• Vertical monitor / tablet: fit to width

This ensures the entire page is always visible in the appropriate orientation.

The layout is designed for dual-monitor setups:

Primary display:

Setlist
Cue text
BPM
Time signature
Comments
Count-in

Secondary display:

PDF sheet music

---

Built-in Metronome

midrum includes a synchronized metronome that automatically follows the BPM and time signature defined for the current piece in the setlist.

Default keyboard control:

M → Start / Stop metronome

The metronome can also be mapped to MIDI controls, allowing performers to start or stop it directly from their controller.

---

MIDI Controller Integration

midrum supports MIDI devices such as the Akai MPK Mini MK2.

All MIDI inputs can be mapped to actions inside the application, including:

• Setlist navigation
• PDF page navigation
• Metronome control
• Triggering audio samples
• Playing instruments

Supported inputs include:

• Pads
• CC controls
• Keyboard keys
• Sustain pedal

Mappings are fully customizable.

---

Instrument Playback

Using a MIDI keyboard, midrum can also function as a simple instrument and soundboard.

Supported use cases:

• Play piano or synth sounds from the keybed
• Trigger soundboard-style samples from pads
• Use CC pads or knobs for navigation

This allows musicians to combine sheet music navigation, sound effects, and instrument playback in one tool.

---

Keyboard Control

All core functionality can also be controlled using the PC keyboard.

Default controls include:

Arrow Up / Down    → Navigate setlist
Arrow Left / Right → Change PDF page
M                  → Start / stop metronome

Keyboard inputs mirror MIDI functionality and provide a fallback when a MIDI controller is unavailable.

---

Input Tracker

midrum includes an Input Tracker, enabled by default.

This logs:

• MIDI input values
• PC keyboard key codes

to the browser console.

This makes it easy to discover input values when creating custom mappings.

The Input Tracker can be disabled if not needed.

---

Customization

midrum is designed to be customized locally for each production.

The application is typically run in localhost, where you can modify:

• /table.ts
• /samples/samples.ts
• /pdf/*.pdf
• /samples/*

---

Setlist Configuration

The setlist is defined in table.ts.

Example:

import { type Row } from "../src/hooks/useSettingsStore";

export const table: Row[] = [
  {
    sketch: "Best Song Ever",
    sketchType: "fellesnummer",
    cue: "Spørs om det du ser bare er en luftspeiling",
    piece: "Best Song Ever snutt - One Direction",
    countIn: "Sondre",
    bpm: 128,
    comment: "Snutt: tell inn 4 slag inkl. fill",
    pdf: "Best Song Ever",
  },
  {
    sketch: "Vippsran",
    sketchType: "lang",
    cue: "*De kjører ut på Voi*",
    pdf: "(Layla)",
    comment:
      "2x hele snutt. Hold siste tone i 4 slag og så choke. Hele bandet står oppreist.",
    countIn: "Kasper",
    piece: "Layla",
  },
];

Notes:

• The pdf field references the file without the .pdf extension
• PDFs should be placed in:

/pdf

Example:

/pdf/Best Song Ever.pdf

If no matching file is found, the value is displayed as plain text.

---

Sample Configuration

Audio samples are defined in samples.ts.

Example:

export const samples: Record<number, HTMLAudioElement> = {
  // Pads B (red) top row
  48: new Audio("/samples/airhorn.mp3"),
  49: new Audio("/samples/crickets.mp3"),
};

Notes:

• The key represents the MIDI note number
• The value is the audio file to trigger

Audio files should be placed in:

/samples

---

Development

midrum is built with:

• React
• TypeScript
• Vite
• Tone.js
• Web MIDI API
• Zustand

---

Running the Project

Navigate to vite project root:

cd frontend

Install dependencies:

npm install

Start the development server:

npm run dev

The app will run locally, allowing you to customize:

• table.ts
• samples.ts
• /pdf/*.pdf
• /samples/*

---

Use Case

midrum was originally created for Norwegian revy live performances, where musicians must handle:

• Many musical numbers
• Rapid cue changes
• Frequent switching between songs
• Sheet music navigation during performance
• Sound effects and samples

The tool allows musicians to focus on playing, while midrum manages the logistics of navigating the show.