OpenSheetMusicDisplay

About OpenSheetMusicDisplay

OpenSheetMusicDisplay 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 sharing sheet music on the internet. VexFlow is widely used for rendering sheet music. It features an extensive note sign library attributable to its open source nature.

OpenSheetMusicDisplay brings the two together and offers an open source turnkey solution for your digital sheet music project.

Quick start

Script tag

<script src="opensheetmusicdisplay.min.js"></script>
<script>
var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay("container-id");
osmd.load("http://downloads2.makemusic.com/musicxml/MozaVeilSample.xml").then(
  function() {
    osmd.render();
  }
);
</script>

NPM & TypeScript

# Install the global CLI and its peer dependency
npm install --save opensheetmusicdisplay

// In your TypeScript source file
import { OpenSheetMusicDisplay } from "opensheetmusicdisplay";

let osmd = new OpenSheetMusicDisplay(container, false);
osmd
  .load(...)
  .then(
    () => osmd.render(),
    (err) => console.log(err)
  );

Check out the full usage guide to learn more.