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.

Menu

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.
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)

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 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, called sox. Also SOX must be installed to run mkjsSf.

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 number25
bank number0
volume correction0 (0 dB = no correction)
path to the soundfont./midiGM.sf2
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 behaviour can be changed by setting the variable instUrl after xmlplay.js is loaded. For instance you may have the following lines in xmlplay.html:

<script src="xmlplay.js"></script>
<script>
    var instUrl = 'path/to/soundfonts';
</script>

Now xmlplay looks for sound fonts in directory "path/to/soundfonts".
The load order is as follows:

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).