Music Editor

A high-performance, web-based music notation and tablature editor built with Angular 21. Designed for musicians who need a robust, responsive, and portable tool to read and play back MusicXML files.

🚀 Key Capabilities

• MusicXML Engine:
  • Advanced parsing of MusicXML 3.0+ files.
  • Full support for multi-staff scores (Notation + TAB).
  • Robust tie-chain accumulation that maintains note sustain across multiple measures.
• High-Fidelity Audio:
  • Powered by Tone.js for sample-accurate playback.
  • Tempo-Automated Transport: Playback head and audio stay perfectly synchronized via automated BPM scheduling.
  • High-Polyphony Synth: Polyphonic triangle-wave synthesis capable of handling dense scores at high tempos (up to 240+ BPM).
  • Master Signal Chain: Integrated master volume and limiter to prevent digital clipping.
• Premium UI/UX:
  • Dark/Light Mode: Full support for dark and light themes with a smooth transition.
  • GitHub Integration: Direct link to the source repository for open-source transparency.
  • Global Controls: Top bar with Play/Pause/Stop, tempo display, master volume, and quick-access mute buttons.
  • Track Management: Side-scrolling track list with Mute/Solo controls and instrument identification.
  • Material 3 Design: Clean, modern interface utilizing the Google Material 3 design system.
• Performance Optimized:
  • Angular Signals: State management using modern signals for zoneless change detection.
  • Deduplicated Scheduling: Optimized audio event loops to ensure stability even on complex, multi-track compositions.

🏁 Getting Started

Prerequisites

• Node.js: v20 or higher.
• npm: v10 or higher.

Installation

1. Clone the repository.
2. Install dependencies:

   npm install

Development

Start the local development server:

npm start

The application will be available at http://localhost:4200.

📖 Usage

Loading Files

• Drag and drop a MusicXML (.xml, .musicxml) file onto the editor.
• The parser automatically identifies tracks, instruments, and tuning.

Playback Controls

• Play/Pause: Play, pause, and stop buttons appear prominently at the beginning of the toolbar.
• Track Muting: Use the labeled Mute buttons to quickly isolate tracks.
• Tablature/Standard Notation: Toggle between tablature and standard notation views.

🛠️ Architecture

• Core Layer: Contains domain models, the MusicXmlParserService, and the AudioEngineService.
• Features Layer: Modularized UI components for the Editor and Library.
• VexFlow Rendering: Industry-standard musical notation rendering for sharp, scalable scores.
• Signal-based State: Reactive state management without the overhead of heavy side-effect libraries.

🛡️ Development Standards

• Zero-Defect Policy: Pre-commit hooks ensure that all code passes strict TypeScript linting.
• Scalability: Designed to handle extremely long scores with thousands of notes without UI lag.

📂 Project Structure

src/
├── app/
│   ├── core/           # Domain models, Parser, and Audio Engine
│   ├── features/       # Feature modules (Editor, UI Components)
│   ├── shared/         # Reusable UI widgets
│   └── app.ts          # Root component
├── assets/             # Static assets
└── styles.css          # Global design system styles

🚢 Deployment

This project is configured for Cloudflare Pages. Every commit to main triggers an automated build and deployment pipeline via GitHub Actions.

🗺️ Roadmap

• Strict Rest Grouping: Enhance the rest overriding logic to strictly adhere to standard musical rest-grouping rules (e.g., preventing notes/rests from crossing the invisible middle barline in 4/4 time).