abc2svg

abc2svg is a rewrite of abcm2ps into Javascript.

It permits to edit, display, print and play music from files written in ABC.

Web usage

abc2svg may be used in any web browser. The needed files are available in my site http://moinejf.free.fr/js/.
They are updated on release change.

These files are:

• abc2svg-1.js This script is the abc2svg core.
  It contains the ABC parser and the SVG generation engine.
  It must be included in the (X)HTML header of the pages where ABC rendering is needed (in <script src= tags).

• abcemb-1.js This script is to be used in (X)HTML pages with the core.
  It replaces the ABC sequences by SVG images of the music (the ABC sequences start on X: or %abc at start of line, and stop on any ML tag).
  See the %%beginml documentation for an example.

• abcdoc-1.js This script is also to be used in (X)HTML pages with the core.
  Mainly used for ABC documentation, it lets the ABC source sequences in the page before the SVG images.
  See the abcm2ps/abc2svg features for an example.

• play-1.js This script may be used with abcemb-1.js for playing the rendered ABC music.
  See this page for an example.

• follow-1.js This script may be used after play-1.js for highlighting the notes while playing. See this page for an example.

• edit-1.xhtml This is a simple web ABC editor/player.

When looking at a ABC file in a web browser, you may also use the following bookmarklet and render the music (create a bookmark and paste the following javascript code into the address/location box).

javascript:(function(){d=document;b=d.body;b.innerHTML="\n%25abc2.2\n%25<!--[CDATA[\n"+b.textContent+"%25]]-->\n";function%20f(u){s=d.createElement('script');s.setAttribute('src',u);b.appendChild(s);};f('http://moinejf.free.fr/js/abc2svg-1.js');f('http://moinejf.free.fr/js/abcemb-1.js');f('http://moinejf.free.fr/js/play-1.js');function%20t(){if(typeof%20dom_loaded=="function"){dom_loaded()}else{setTimeout(t,200)}};setTimeout(t,200)})();void(0)

Notes:

• The music is rendered as SVG images. There is one image per music line / text block.
  If you want to move these images to some other files, each one must contain the full CSS and defs. For that, insert

%%fullsvg x

in the ABC file before rendering (see http://moinejf.free.fr/abcm2ps-doc/fullsvg.xhtml for more information).

• Playing uses HTML5 audio.

• With the editor, if you want to render ABC files which contain %%abc-include, you must:

  • load the ABC file from the browse button
  • click in the include file name
  • load the include file by the same browse button

  Then, you may edit and save both files.
  Rendering/playing is always done from the first ABC file.
  There may be only one included file.

• The editor comes with different ways to enter the music from the keyboard.
  If you have a US keyboard, you may try these bookmarklets:

javascript:(function(){if(typeof%20loadjs=='function'){loadjs('abckbd-1.js')}else{alert('use%20with%20abc2svg%20editor')}})();void(0)

javascript:(function(){if(typeof%20loadjs=='function'){loadjs('abckbd2-1.js')}else{alert('use%20with%20abc2svg%20editor')}})();void(0)

• The .js and .xhtml file names have a suffix which is the version of the core interface (actually -1).

nodeJS usage

Installed via npm, the abc2svg package comes with the command line program abc2svg.

This one may be used as abcm2ps to generate XHTML files, but it writes to standard output:

abc2svg mytunes.abc > Out.xhtml

Build

If you want to build the abc2svg scripts in your machine, you must first get the files from github, either as a tar.gz or .zip file, or by cloning the repository:

git clone http://github.com/moinejf/abc2svg

(you may use --depth=1 if you don't want the full git history)

Then, building is done using the tool ninja.
You may do it:

• without minification
  This is interesting for debug purpose, the scripts being more human friendly.

    NOMIN=1 ninja -v

• in a standard way with minification
  In this case, you need the tool uglifyjs which comes with nodeJS.

    ninja -v

If you also want to change or add music glyphs, you may edit the source file font/abc2svg.sfd. In this case, you will need both base64 and fontforge, and run

    ninja -v font.js

Batch

After building the abc2svg scripts, you will be able to generate music sheets from the command line as you did with abcm2ps, thanks to the following shell scripts (the result goes to stdout):

• abcjs24 with js24 (Mozilla JavaScript shell - Spidermonkey)
• abcjsc with jsc-1 (webkitgtk2)
• abcnode with node (nodeJS)
• abcv8 with d8 (Google libv8)