Skip to main content

Features

Web Music Score is a TypeScript/JavaScript library for rendering and playing music notation directly in the browser.
It provides a modern API, flexible document builder, audio playback, and optional React components for easy UI integration.

📌 Compatibility​

  • Bundled in ESM, CJS and IIFE formats.
  • The target JavaScript version is ES6/ES2015.
  • No polyfills are included.

🎼 Core Features​

✔ Music notation rendering​

  • Staff, grand staff, guitar tab, and combined guitar notation
  • Clefs: Treble, Bass, octave-down variants, tab tunings
  • Automatic layout for measures, rows, beams, accidentals, ties, slurs slides, tuplets
  • Lyrics, annotations, labels, navigation symbols, fermatas
  • Staff groups for custom placement of text/markings above/below systems

✔ DocumentBuilder API​

A powerful, chainable JS/TS API for constructing notation:

let doc = new Score.DocumentBuilder()
  .setScoreConfiguration("treble")
  .addMeasure()
  .addNote(0, "C4", "4n")
  .addRest(0, "4n")
  .getDocument();

Supports:

  • Score configuration presets & custom objects
  • Headers, tempos, key signatures, time signatures
  • Notes, chords, rests, tuplets
  • Lyrics placement & hyphens
  • Guitar tab string/fret handling
  • Annotations, labels, extensions
  • Playable navigation (repeats, D.S., D.C., Codas)

🎧 Audio Playback​

Built-in playback engine​

  • Default synthesizer instrument included
  • Accurate timing, navigation, repeats, tuplets
  • Programmable via Score.MPlayer

Instrument modules​

  • audio-cg: Classical Guitar module (browser or npm)
  • Easily create custom instruments by implementing:
class MyInstrument implements Audio.Instrument {
  playNote(note, duration, volume) {}
  stop() {}
}

💻 Browser & Framework Support​

Browser​

  • IIFE bundle available from unpkg / jsDelivr
  • Loads as global WebMusicScore
  • Optional instrument bundles: e.g. audio-cg

React​

  • First-class React UI components
  • <MusicScoreView />, <PlaybackButtons />
  • React 18+ compatible
  • Ideal for score viewers, exercises, music education apps

Plain JavaScript​

A simple canvas renderer and playback controls:

new Score.MRenderContext().setCanvas("canvasId").setDocument(doc).draw();
new Score.MPlaybackButtons().setPlayButton("play").setDocument(doc);

📦 Modules​

Web Music Score is split into logical modules for efficient importing:

  • core — errors, utilities
  • audio — playback engine & interface
  • theory — scales, intervals, time signatures
  • score — notation structures, rendering
  • react-ui — React components
  • pieces — demo songs
  • audio-cg — classical guitar instrument

🎹 Instruments​

Included​

  • ✔ Synthesizer

Optional modules​

  • ✔ Classical Guitar (audio-cg)
    – loadable via npm or as standalone IIFE bundle

Custom instruments​

Create your own with just a few methods — perfect for games, samplers, or experimental sounds.

🎵 Example Capabilities​

Notation​

  • Notes, chords, rests
  • Tuplets of any type
  • Beams (automatic based on time signature)
  • Key & time signatures
  • Tempo markings
  • Tabs with string selection
  • Labels/chord symbols
  • Lyrics with alignment & hyphens
  • Annotations (dynamics, tempo, etc.)
  • Navigation: repeats, endings, segno/coda, Fine

Rendering​

  • Canvas-based rendering
  • Automatic layout
  • Staff grouping
  • Extension lines

Playback​

  • Play/pause/stop
  • Combined play/stop modes
  • Controlled through JS or React

🧰 Developer-Friendly​

  • Strongly typed TypeScript API
  • Modular imports to reduce bundle size
  • Works in plain JS, TS, React, and browser-only environments
  • Designed to avoid unnecessary abstractions—simple, predictable calls