Using OSMD with TypeScript

TypeScript in combination with Webpack, SystemJS or Browserify, is the most comfortable and straightforward way of using OpenSheetMusicDisplay.

An up-to-date example of how to use OpenSheetMusicDisplay with TypeScript and Webpack can be found in the webpack-usage-example repository. Examples for SystemJS and RequireJS are available under systemjs-usage-example and browserify-usage-example.

Retrieve the lastest version of OpenSheetMusicDisplay from npm:

$ npm install --save opensheetmusicdisplay

In your TypeScript source, import the OpenSheetMusicDisplay class from the opensheetmusicdisplay module

import { OpenSheetMusicDisplay } from "opensheetmusicdisplay";

and instantiate it with the DOM element to contain the music sheet:

let openSheetMusicDisplay = new OpenSheetMusicDisplay(container);

Note that OpenSheetMusicDisplay’s constructor either takes an element’s ID as string or the actual HTMLElement as first parameter.

Now we can load MusicXML by either passing a file’s URL, the root node of a MusicXML document or the string content of a .xml or .mxl file to OpenSheetMusicDisplay’s load() method.

openSheetMusicDisplay
  .load("http://downloads2.makemusic.com/musicxml/MozaVeilSample.xml")
  .then(
    () => openSheetMusicDisplay.render(),
    (err) => console.err(err)
  )
  .then(
    () => console.log("Sheet music displayed."),
    (err) => console.err(err)
  );

load() returns a Promise, and as soon as loading the sheet music finishes successfully, OpenSheetMusicDisplay can be instructed to render it by calling render(). Note that render() returns a Promise too, which can be used to take further actions on finish or handle errors.

Usage