# CASPER Web MIDI - User Manual

Welcome to **CASPER** (Computer Assisted Sound Processing Educational Resource) Web MIDI! 
This web application is a powerful, browser-based MIDI looper and practice tool designed to help you practice, layer, and audition musical ideas directly from your browser.

## Getting Started

### Connecting a MIDI Keyboard
CASPER relies on the Web MIDI API.
1. Connect a USB or Bluetooth MIDI keyboard to your computer.
2. Open the app in a supported browser (e.g. Chrome, Edge). Note: Brave browser is not supported.
3. Look at the top right of the header bar. The **MIDI Input Selector** should automatically detect and select your keyboard. The indicator light next to it will flash when MIDI data is received.
4. *No MIDI Keyboard?* You can use your computer's QWERTY keyboard to play notes! The middle row (A, S, D, F...) maps to white keys, and the top row (W, E, T, Y...) maps to black keys.

### Basic Audio Controls
- **Octave Shift:** Use the slider in the left sidebar to transpose the virtual keyboard up or down if your physical keyboard is small or if you are using QWERTY.

---

## Transport & Playback

The top bar contains your main playback controls:
- **Play (►) / Pause:** Starts or pauses the sequencer and looper timeline.
  - *Shortcut:* `Spacebar`
- **Stop (■):** Stops playback and rewinds the timeline back to the beginning (Measure 1).
- **Record (●):** Toggles Global Recording mode. If any tracks are Armed, playing notes on your keyboard will record them into the loop.
  - *Shortcut:* `Shift + Spacebar`
- **Display Mode (📜):** Toggles the main Ledger canvas between smooth scrolling mode and static page mode.

---

## Tracks Looper

The right sidebar houses the **Tracks Looper**, allowing you to record and layer up to 4 different instruments simultaneously.

### Track Controls
Each track card has several controls:
- **Instrument Selector:** Choose the sound preset for this specific track.
- **Length (Len):** Set how long the loop is for this track (e.g., 4 Measures, 8 Measures).
- **Mode:**
  - `Overwrite`: Recording over an existing section will erase the old notes and replace them with new ones.
  - `Merge`: Recording over an existing section will layer your new notes on top of the old ones.

### Arming & Auditioning Tracks
- **Auditioning:** Click anywhere on the background of a track card to make it your active "Auditioning" track. Your live keyboard will now play this track's instrument. The track card will have a slow pulsing border.
- **Arming (●):** Click the small circular LED button to Arm the track for recording.
  - **Dim:** Track is unarmed.
  - **Solid Amber:** Track is armed and ready.
  - **Blinking Amber:** Global Record is active and notes are currently being recorded into this track!
- *Note:* You can arm multiple tracks at once by clicking their Arm buttons, but your keyboard will only audition the one with the pulsing border.

### Mute, Solo, and Clear
- **M (Mute):** Silences the track during playback.
- **S (Solo):** Mutes all *other* tracks so you only hear this one.
- **🗑 (Clear):** Deletes all recorded notes on this track.

### MIDI Staging
- **Stage MIDI (📥):** Opens the staging modal to import a `.mid` file and map its tracks to the CASPER looper tracks (1-4 or Drums).
- **Enable Staged:** Toggles playback of the imported MIDI file in the looper.

---

## Navigation & Zoom

CASPER offers flexible ways to view and interact with your music:

- **Virtual Piano Keyboard:** 
  - *Drag:* Click and drag left or right on the empty space around the piano keys to scroll the keyboard.
  - *Zoom:* Use your mouse scroll wheel over the piano keys to zoom in and make the keys larger or smaller.
- **Main Ledger (Staff Canvas):**
  - *Drag Playhead:* Click and drag the vertical green playhead line left or right to quickly scrub through time.
  - *Zoom:* Use your mouse scroll wheel over the notation canvas to increase or decrease the spacing and size of the musical staff lines.

---

## Practice Tools

- **Metronome & Sequencer:** In the top bar, you can toggle the built-in Drum Sequencer and Metronome audio on/off.
- **Practice Loop:** In the left sidebar, enable the Practice Loop to continuously loop a specific section of your music (e.g., loop from Measure 1 to Measure 4).
- **Timing Gauge:** At the top of the canvas, the Timing Accuracy gauge gives you live feedback on whether you are playing your notes early, late, or perfectly on the beat.

---

## Progression System

CASPER automatically saves your progress locally. You can also manually manage it:
- **Export Progress (💾):** Saves your user progress to a local `.json` file.
- **Import Progress (📂):** Loads your user progress from a previously saved `.json` file.

---

*Enjoy making music with CASPER!*