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.
• Music Braille output: converts a score into braille music notation (Unicode braille), see the Braille module's README

 

Limitations

Not all MusicXML tags and attributes are (fully) supported, e.g.:

• Some attributes like special drums noteheads/glyphs

If something in your MusicXML file isn't displayed as expected, please check our Issues or open a new one, ideally with the file (or a part of it).

Also, OSMD is a renderer, not a full interactive sheet music editor. Rendering takes some time for long scores (incremental rendering shows the first systems quickly), and you can't easily/quickly move notes, place new notes, etc.
There are however limited editing features like making notes invisible, coloring, hiding some instruments/staffs, not showing key or time signatures, and so on, see IOSMDOptions and EngravingRules
(You can manipulate the SVG nodes for instant changes like note re-coloring, see Exploring the Demo | Wiki)

How to Use OSMD

• Available as NPM module, can be used with plain javascript or module managers like webpack
• Getting Started: Detailed instructions in our Wiki
• What's new: changelog, releases, and our blog with the highlights of each release
• Contributing: see Contributing | Wiki
• If you have further technical questions, you can:
  • Leave a comment in our Discussions section (especially for questions of understanding)
  • Browse through our Issues
  • Open a new issue (may be moved to Discussions).

Sponsor OSMD and get early access to the audio player and more

It would be great if free software were sustainable on its own. But to keep on improving and developing OpenSheetMusicDisplay we need your support. Your monthly sponsorship subscription - especially if you are already actively using OSMD - would mean everything to us - it’s a stable way of enabling us to continue our work, and improve and expand OSMD.

Features already available in early access for Github Sponsors:

• OSMD Audio Player
• Audio Export (save the playback as a WAV or MP3 file, rendered in the browser, much faster than real time) - NEW!
• Native modules + example projects (React Native, Kotlin/Android, Swift/iOS)
• Jianpu Display (Numbered Musical Notation), with playback
• Annotations (text comments and music symbols, e.g. dynamics or fermatas, on the score) - NEW!
  • Anchored to a beat on their staff, so they move with the music when the layout changes (width, zoom, page format, parts shown)
  • Kept in layers (e.g. one per person) that can be shown or hidden, and saved and loaded as XML files
  • Added and edited in the included menu, or in your own UI via the API

More is in the making: we're always working on OSMD improvements and additional features, just look at our release history / changelog!

Besides the early access features, you can get other perks like a personal postcard from the team in Vienna. Check them out at our GitHub sponsors page.

 

And there are other ways to contribute to the community - we write about each release and our work on our blog, and share our knowledge. We encourage our sponsors to bring up their desired features and pitch blog post ideas.

Though we highly recommend the sponsor route, you can also donate via Paypal:

Any support is highly appreciated.

About Us

OSMD is made by Phonicscore - a music-tech company based in Vienna. We create solutions for musicians, sheet music publishers, app developers, music stores and researchers:

• Open source software
• Sheet Music Rendering Software
• Native & web apps: PracticeBird for iOS and Android

Our mission is to provide state of the art software solutions for building MusicXML apps and to include the community in a constant thrive for improvement. We want to take away the pain of building music software from scratch and offer a shortcut when it comes to building your next MusicXML sheet music application.

We also want to thank our Github Contributors, who show that with open source many people come together to not only share but improve software.

Get In Touch

To contact us directly, you can:

• Use the Contact form on opensheetmusicdisplay.org to send a mail
• Send a mail to support@opensheetmusicdisplay.org
• Leave a (public) comment in our Discussions section
• Join our Discord (chat) Server.