String Quartet No. 1 — Performance Score Web App
The Performance Score is a web-based application that displays the scrolling graphic score for String Quartet No. 1. All four performers read from the same app, each on their own device. The score scrolls automatically during playback, with animated elements — curves, gravitational conductors, line wedges, and notation fragments — appearing and disappearing in real time.
The app has two operating modes:
The app runs in any modern web browser. Recommended setup for performers:
| Requirement | Recommendation |
|---|---|
| Device | iPad (any recent model) or laptop/tablet with 10"+ screen |
| Browser | Safari (iPad), Chrome, or Edge. Firefox is supported but Safari/Chrome are preferred for Wake Lock and fullscreen APIs. |
| Orientation | Landscape |
| Network | Wi-Fi connection to the same network as the server (for synchronized rehearsal/performance). The app also works offline for solo practice. |
| Battery | Fully charged or plugged in for performances. The app will keep the screen awake during performance mode. |
When you navigate to the app's URL, you arrive at the landing page — a single-page flow that guides you from setup to launching the score.
The landing page presents a simple top-to-bottom flow:
After joining or creating a room, a 🎭 Start Performance button appears below "Open Score." This launches the score directly into Performance Mode (readiness check → countdown → locked playback). The button is only visible when you are in a room — performance mode requires a synchronized session.
Below the launch flow, you can also tap Full Score (all parts) to open the full score without selecting a specific instrument. If you are in a room, the Full Score link automatically includes your room code.
Tap Create Room. A unique 6-character room code is generated (e.g., HK7W3N). Share this code with your ensemble — each performer enters it on their own device to join the same synchronized session.
Enter the room code shared by the session creator into the code field and tap Join. You must have your name and instrument selected before joining.
If you have previously joined a room, the landing page recognizes you on your next visit. A Welcome back banner appears showing your name, instrument, and room code, with a Rejoin button that takes you directly back to the score. Tap Start fresh to clear your session and set up from scratch.
From within the score app, open the Controls Overlay and tap the 🏠 Home button to return to the landing page. This button is only available in rehearsal mode — it is hidden during performance mode.
A room is created when the first performer joins and remains active as long as at least one performer is connected. If all performers disconnect, the room persists for a 5-minute grace period — if someone reconnects within that window, the room state (playback position, markers, etc.) is restored. After the grace period, the room is cleaned up.
The landing page also provides links to:
The app offers two views of the score:
All four instrument tracks displayed simultaneously, stacked vertically. This is the default view when no track parameter is specified. Each track occupies one quarter of the screen height.
A single instrument track expanded to fill the entire screen height, making the notation approximately 4× larger than in full score view. Parts view also supports configurable page density — 4, 6, or 8 pages visible per screen (default: 6).
To switch between views:
When switching views, the app preserves your current position in the score. There is a brief reload (~1–2 seconds) during the transition.
In parts view, use the Track button in the Controls Overlay to cycle through instruments: Vln I → Vln II → Vla → Vc → Vln I. The button label shows the currently selected instrument.
Use the Pages button in the Controls Overlay to cycle through page densities: 4p → 6p → 8p → 4p. More pages shows more of the score at once but with smaller notation.
Rehearsal mode is the default operating mode. It provides full interactivity for practice and group rehearsal: touch gestures for navigation, a controls overlay with playback controls, custom markers, looping, speed adjustment, and annotation support.
When connected to a server with other performers in the same room, playback is synchronized — pressing Play on the leader's device starts playback for all connected performers. Individual performers can detach to navigate independently and re-sync at any time.
All gestures use finger touch. Apple Pencil input is reserved for annotations and bypasses the gesture system entirely.
| Gesture | Zone | Action |
|---|---|---|
| Tap | Left edge (15%) | Previous page (immediate) |
| Tap | Right edge (15%) | Next page (immediate) |
| Tap | Center top (70%, upper half) | Play / Pause |
| Tap | Center bottom (70%, lower half) | Toggle Controls Overlay |
| Double-tap | Center (70%) | Reset zoom to 100% |
| Swipe left | Anywhere | Next page |
| Swipe right | Anywhere | Previous page |
| Swipe down | Anywhere | Add marker at current position |
| Swipe up | Anywhere | Toggle Part ↔ Full Score view |
| Pinch | Anywhere | Zoom in / out |
Tap the center-bottom area of the screen to open the Controls Overlay — a floating panel of buttons for all major actions. The overlay auto-fades after 4 seconds of inactivity. Tap anywhere on the overlay to reset the fade timer.
| Button | Action |
|---|---|
| ▶ Play / ■ Stop | Toggle playback |
| ◀ / ▶ | Previous / Next page |
| ⊙ 100% | Reset zoom to 100% |
| 📄 Part / Full | Toggle Part ↔ Full Score view |
| Vln I / Vln II / Vla / Vc | Cycle instrument track (parts view only) |
| 4p / 6p / 8p | Cycle pages per screen (parts view only) |
| 🔖 Markers | Open marker panel (add, list, jump to, delete) |
| 🔁 Loop | Open loop panel (set A/B points, enable/disable) |
| Jump to [sec] Go | Jump to a specific time in seconds |
| Speed (1x) | Cycle playback speed |
| 🏠 Home | Return to landing page (rehearsal mode only) |
| ✕ | Close overlay |
Markers let you bookmark specific positions in the score for quick navigation.
Swipe down anywhere on the score. A name prompt appears — type a short label (e.g., "pizz section", "cue after fermata") and confirm. The marker is saved at your current playback position. Markers work both during playback and while stopped.
Open the Controls Overlay and tap 🔖 Markers to see your marker list. Tap any marker to jump to that position.
In the marker panel, each marker has a delete button to remove it.
Markers are saved in your browser's local storage. They persist across page reloads on the same device. Markers also appear as colored ticks on the MiniMap bar at the bottom of the screen.
Looping lets you repeat a section of the score for practice.
Open the Controls Overlay and tap 🔁 Loop. Set the loop start (A) and end (B) points using the controls. Enable the loop to begin looping — when playback reaches point B, it jumps back to point A.
The loop panel displays the current loop iteration count. You can set a fixed number of loops or loop indefinitely.
Looping is per-client — it does not affect other performers in the room. When connected to a room, loop state is synchronized so all performers in the room see the same loop boundaries if set by the leader.
Adjust playback speed for practice. Available speeds: 0.5×, 0.75×, 1.0× (normal), 1.25×, 1.5×, 2.0×.
Access the speed button through the Controls Overlay. Each tap cycles to the next speed. The current speed is displayed on the button.
When you join a room, you are in synced mode by default. The leader's playback controls (Play, Stop, Jump To) apply to all synced performers in the room. All cursors advance together in real time.
The first performer to join a room becomes the leader. The leader can:
You can detach from the group to navigate freely. This happens:
While independent, you control your own playback and page navigation without affecting others. A toast notification appears: "Auto-detached — tap 🔗 to re-sync."
Tap the sync button in the Controls Overlay to rejoin the group. Your score jumps to the leader's current position.
A small colored dot indicates your synchronization quality with the server:
| Color | Meaning |
|---|---|
| 🟢 Green | Excellent — tight sync, low latency |
| 🟡 Yellow | Fair — some jitter, still usable |
| 🔴 Red | Poor — significant drift, may need to re-sync |
If the network connection is lost, a non-intrusive "OFFLINE — local clock" banner appears. The score continues playing on your device's local clock. When the connection is restored, the banner disappears and synchronization resumes automatically.
On iPad, Apple Pencil input is handled separately from finger touch — you can draw on the score without triggering any gestures.
Touch the Pencil to the score and draw freely. Annotations are rendered as colored strokes on a transparent overlay above the score.
A stamp palette provides common musical symbols that can be placed with a single Pencil tap.
Annotations auto-save to your browser's local storage. You can also export annotations as a JSON file (for backup or transfer to another device) and import them back.
A thin horizontal progress bar at the bottom of the screen shows your position in the full score. The current playback position is highlighted, and your markers appear as colored ticks along the bar.
Tap anywhere on the MiniMap to jump directly to that position in the score. The MiniMap collapses to a minimal state when not in use and expands when you hover or touch near the bottom edge.
Performance mode is a locked-down state designed for live concerts. It disables all touch interaction (no accidental page turns, no zoom, no overlays) and provides a structured flow from readiness check through countdown to synchronized playback and end-of-performance ceremony.
Performance mode is activated by the leader or via the URL parameter ?mode=performance. When activated, all connected performers enter the readiness flow.
A readiness panel appears on every performer's screen. Each performer taps "Ready" — this also triggers fullscreen mode on their device (fullscreen must be activated by a user gesture on each device; it cannot be triggered remotely).
The leader's panel shows the ready count and a "Begin Performance" button that enables only when all performers are ready.
When the leader taps "Begin Performance," a countdown overlay appears on all devices: 3… 2… 1… The score is visible behind the countdown so performers can see the first page. All devices use latency-compensated timing to begin playback simultaneously.
During playback, the score scrolls automatically. All touch gestures are completely disabled:
The only available interaction is the emergency control (see below).
When the score reaches the end, playback stops automatically on all devices. A "Performance Complete" overlay fades in, showing the performance duration. The leader can then choose to return to rehearsal mode, start again, or close the session.
Performance lockdown remains active until the leader explicitly exits performance mode.
Press and hold two fingers anywhere on the screen for 2 seconds. An emergency menu appears with two options:
The app accepts URL parameters to configure its behavior. These are appended to the base URL as query parameters (e.g., ?track=1&pages=6).
| Parameter | Values | Description |
|---|---|---|
track | 1, 2, 3, 4 | Show a single instrument track in parts view. 1 = Violin I, 2 = Violin II, 3 = Viola, 4 = Cello. Omit for full score. |
pages | 4, 6, 8 | Number of pages visible per screen in parts view. Default: 6. |
mode | performance | Start directly in performance mode (readiness flow). Omit for rehearsal mode. |
goto | seconds (e.g., 54.5) | Jump to a specific time on load. Useful for deep-linking to a particular section. |
room | 6-char code (e.g., HK7W3N) | Join a specific rehearsal room on load. |
/score?track=3&pages=8 — Viola part, 8 pages per screen/score?track=1&goto=120 — Violin I part, starting at 2:00/score?mode=performance — Enter performance mode immediately/score?track=2&room=HK7W3N — Violin II in room HK7W3N/score — Full score, rehearsal mode (default)A separate document explains the non-standard notation and graphic score symbols used in the piece — curves, gravitational conductors, line wedges, notation fragments, and compound techniques.
You can access this document from the landing page under Documentation, or directly at:
The Music Performance Instructions cover:
String Quartet No. 1 — Justin Yang