OpenSheetMusicDisplay (OSMD)
A MusicXML renderer for the Browser
opensheetmusicdisplay.org
About OSMD • Demo • Key Features • Limitations • How to Use OSMD • Sponsor OSMD • About Us • Get In Touch
:star: - Star us on Github - It really helps us a lot!
:pray: - Become our Sponsor - Support our work and receive awesome perks!
About OSMD
OpenSheetMusicDisplay renders MusicXML sheet music in the browser. It is the missing link between MusicXML and VexFlow. Built upon many years of experience in both sheet music interactivity and engraving, it is the perfect solution for app developers seeking to build digital sheet music services.
MusicXML is the de facto standard for exchanging sheet music between music software.
VexFlow is widely used for rendering sheet music. It features an extensive library of musical elements, but each measure and symbol has to be created and positioned by hand in Javascript.
OpenSheetMusicDisplay brings the two together and offers an open source turnkey solution for your digital sheet music project.
Demo
Try the Public Demo to see what OSMD can do.
Learn more about the demo and OSMD in the OSMD Wiki.
Developers can also run a local development demo (see Wiki):
Key Features
- Displays MusicXML sheet music in a browser(less) environment (Javascript, Typescript, server-side: headless/browserless NodeJS script)
- Audio playback: the OSMD Audio Player is available in early access for Github sponsors, see below
- Uses Vexflow for rendering and (partly) layout
- Parses most MusicXML tags and integrates it into an accessible and modifiable data model (e.g. to change a note's color)
- Offers many options (OSMDOptions / EngravingRules): Page Format, Font Family, Positioning, not rendering certain elements like the title or lyrics, etc.
- Allows modification of the displayed score, like hiding parts, instruments or voices, hiding instrument names, title or composer, a more compact layout, or coloring notes
- Transposes the score, or single instruments, by semitones, optionally keeping the note spelling (transposing by interval), see Transposing | Wiki
- A cursor to step through the notes (e.g. for playback or practice apps), and finding the note at a click position
- Fast rendering, and incremental rendering for large scores: draws the first systems right away and the rest as the user scrolls (
renderNext(), see Getting Started | Wiki)
- SVG elements with classes naming what they show (e.g.
vf-stavenote, osmd-lyrics, osmd-title), so they can be styled with CSS
- Outputs SVG or PNG, also via nodejs script in the command line, completely headless/browserless (e.g. for server-side rendering - see generateImages script)
- Written in Typescript with complete type information, 100% compatible with Javascript (minified build is .js)
- Can display tablature (guitar tabs) from MusicXML, including effects like bends and glissandi, optionally with the rhythm (stems, beams). Can be combined with treble clef.
Limitations
Not all MusicXML tags and attributes are (fully) supported, e.g.:
- Some attributes like special drums noteheads/glyphs
This is the beginning of the README. Read the rest at the original. Read the full README ↗
