Home

Awesome

MusicXML Player

Build

A TypeScript component that loads and plays MusicXML files in the browser using Web Audio and Web MIDI.

Getting started

npm install
npm run build
npm test
npm run demo

Then open http://127.0.0.1:8080/

Theory of operation

This component synchronizes rendering and playback of MusicXML documents. Rendering is done using existing Web-based music engraving libraries such as OpenSheetMusicDisplay or Verovio. Playback uses standard MIDI files that are expected to correspond to the given MusicXML, and sends the MIDI events to either a Web MIDI output, or to a Web Audio synthesizer, using the module midi-player.

The crucial part of this functionality is to synchronize the measures and beats in the MusicXML file with the events of the MIDI file. In a nutshell, the player expects the provider of the MIDI file (an implementation of IMidiConverter) to supply a "timemap", which associates each measure in the MusicXML file to a timestamp at which this measure occurs. In the case of repeats and jumps, the same measure will be referenced several times in the timemap.

There are 3 bundled implementations of IMidiConverter in this module:

API usage

At the moment, the only documentation available for the usage of the player is located in the demo app.