A simple JavaScript component that loads and plays MusicXML files in the browser using Web Audio and Web MIDI.
npm install
npm run build
npm test
npm run demo
Then open http://localhost:8080
This component synchronizes rendering and playback of MusicXML documents. Rendering is done using existing Web engraving libraries such as OpenSheetMusicDisplay or Verovio. Playback takes a specially-crafted MIDI file that corresponds to the given MusicXML, and sends the MIDI events to either a Web MIDI output, or to a Web Audio synthesizer.
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 component expects the MIDI file to contain special marker meta messages of the form Measure:X that occur at the start of each measure. This allows the player to synchronize the advancing cursor on the sheet with MIDI playback, and to account for loops and repeats. To produce MIDI files that contain these messages, you can use the companion tool musicxml-mma which produces and serves MIDI files from MusicXML documents.