Xmlplay

Plays a MusicXML or ABC file with real time synthesis using sf2 sound fonts.

Play back can be started with the play button or by clicking outside the score. Clicking inside the score repositions the cursor (where play back will start)

Score files can be opened with the browse button or by dragging and dropping a file in the blank area of the page.

Tempo box	While playing you can change the tempo with this box. The starting value in this box is derived from the score. Once you change the tempo all subsequent explicit tempo markings in the score get scaled accordingly (though you see no change in the score).
Play	Starts/Stops playback (you can also click outside the score area)
Score File	The browse button opens a file dialog where you can navigate to your own score file. Only files with extension .abc or .xml are shown
Use Dropbox	When this box is checked the Score File button changes into one that opens your Dropbox. After logging in you can browse your Dropbox and select a score file.
Full Screen	Swithches to full screen mode, when supported by the platform (not on iOS)
SF2 / MIDI-js	Radio buttons to enable one of the two modes for synthesis. SF2 does real time synthesis while MIDI-js uses pre-rendered wave forms.
Save svg	Saves the currently displayed score as an SVG file.

Extra parameters in the URL

xmlplay recognizes extra parameters in the URL:

noErr	Hides the error display area at the bottom of the screen
noMenu	Hides the Menu.
noSave	Removes the Save button from the menu
noDash	Hides the dashed line, which is used to align (and shift) the score
noPF	Do not use the page format specified in a MusicXML score file. Use the default page format of abc2svg
noLB	Do not translate the score line breaks specified in MusicXML to ABC line breaks. Let abc2svg do its own automatic line break algorithm.
noRT	Disables the real time synthesizer and forces play back to use pre-recorded wave forms (known as midi-js, see here and here)
sf2=PATH	Sets the fall back path for SF2 sound fonts

For instance, the following example:

xmlplay.html?test/bwv539p.abc&noErr&noDash&noMenu

shows the prelude without any buttons, dashed line or error bar. You can start/stop play back by clicking outside the score area.

Sound fonts

Real time synthesis only works when a special javascript version of a .sf2 soundfont is present in the same directory as xmlplay. Such a javascript version can be made with the program mkjsSf.

Requirements: node.js and Lame (or SOX).

mkjsSf is included in the zip file of the distribution in subdirectory sf_js. To run mkjsSf node.js must be installed on the system. mkjsSf compresses all wave form samples of the sf2 soundfont into much smaller mp3 chunks. To do this mkjsSf uses an (external) program: either sox or lame. At least one of these must be installed (and in the PATH).

Suppose we have a soundfont2 file: midiGM.sf2, containing all 127 midi instruments of the GM standard. A javascript soundfont file for the "acoustic steel guitar" (instrument 25) is then made as follows:

> mkjsSf_console.js 25 0 0 midiGM.sf2

mkjsSf_console.js is a batch file that calls mkjsSf with the required parameters:

instrument number	25
bank number	0
volume correction	0 (0 dB = no correction)
path to the soundfont	./midiGM.sf2
compression format (optional)	mp3, ogg or wav (default: mp3)

The last parameter compression format is optional. When it is omitted the program uses mp3 compression with lame. Otherwise the program will use sox with the indicated compression format.

The program outputs a javascript soundfont file named: "instr25mp3.js", which should be placed in the same directory as xmlplay. The name is fixed and should not be changed. xmlplay only looks for sound font files named instrXXXmp3.js, where XXX is the instrument number ranging from 0 to 127. As the name implies the javascript sound font file only contains one instrument. If other instruments are used in the score, separate files must be made for each of them.

Loading of Sound fonts

Normally xmlplay looks for sound fonts in the same directory as xmlplay.html. This path can be changed by including a special <div> with id="parms". When this element is found it will be read and hidden by xmlplay. For instance you may have the following <div> in xmlplay.html:

<div id="parms">
    { "sf2url1": "path/to/sf2_soundfonts/",
      "midijsUrl1": "path/to/midijs_soundfonts/"
    }
</div>

Now xmlplay looks for sound fonts in these directories. Note the mandatory trailing slash at the end of the path. Normally sf2url1 and midijsUrl1 are set to "./", which is the directory from where xmlplay.html is loaded.
The load order is as follows:

First xmlplay tries to find its own javascript sound font files, named: instrXXXmp3.js (explained above). Only these sound fonts allow for real time synthesis.
Next, it will look for local midi-js sound fonts. No real time synthesis but simple playback of the pre-rendered waveforms in the midi-js sound font.
When no local sound font files are found at all, xmlplay will try to download midi-js files from this project on Github
Finally, when even downloading from Github fails, xmlplay gives up and play back will not work.

In addition to the primary paths for soundfonts (parameters sf2url1 and midijsUrl1) you can also set a secondary (fall back) path with the parameters sf2url2 and midijsUrl2. Normally sf2url2 is not set and midijsUrl2 points to the sound font directory FluidR3_GM on Github.

Embedding

xmlplay_emb is a version of xmlplay that allows embedding of ABC notation in an HTML document. A simple example of such a document is:

<html>
<script src="abc2svg-1.js"></script>
<script src="xmlplay_emb.js"></script>
<div class="abc">
X:1
K:C
C D E F |  G A B c |
</div>
<div id="comp"></div>
</html>

displaying the scale of C. Apart from xmlplay_emb.js also abc2svg-1.js needs to be included in the header of the file. It is the library that renders the score. The last element is an empty <div>, that is used by xmlplay_emb to display messages during initial loading of sound fonts. It should have id="comp" for xmlplay_emb to find it.

A larger example of a page with embedded ABC

If you want to embed a MusicXML document, first translate it to ABC with this utility (just drag and drop the xml file on the empty page).