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 a pure HTML file (no javascript, no external dependencies) with SVG pictures for each score line. This file can be opened in a browser (file menu:open) and printed. |
| 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&noMenushows the prelude without any buttons, dashed line or error bar. You can start/stop play back by clicking outside the score area.
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.sf2mkjsSf_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.
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:
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.
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).