abc2svg xhtml example + play + follow

This XHTML document contains a ABC tune ('J'ai du bon tabac').

To display this tune, it includes the script abcweb-1.js which loads the abc2svg core, scans the document and replaces the ABC sequence(s) by SVG images.

And, to play the tune, it includes the scripts snd-1.js and follow-1.js. Check it by clicking the score!

%abc-2.2 %%musicfont url(../js/abc2svg.ttf) %%pagewidth 14cm %%bgcolor white %%topspace 0 %%composerspace 0 %%leftmargin 0.8cm %%rightmargin 0.8cm X:1 T:J'ai du bon tabac C:Trad. M:2/4 L:1/8 Q:1/4=120 K:C CDEC|D2DE|F2F2|E2E2|CDEC|D2DE|F2G2|C4:| G2GF|E2DE|F2G2|F2E2|G2GF|E2DE|F2G2|D4| CDEC|D2DE|F2F2|E2E2|CDEC|D2DE|F2G2|C4||

If you also want to put music in your pages, you may have a look at the source of this file.

The abc2svg scripts are loaded by this sequence in the HTML header (the relative path ../ must be replaced by http://moinejf.free.fr/ in your pages):

<script src="http://moinejf.free.fr/js/abcweb-1.js"></script>
<script src="http://moinejf.free.fr/js/js/snd-1.js"></script>
<script src="http://moinejf.free.fr/js/js/follow-1.js"></script>

Then, the ABC sequences in the HTML body must start on X: or %abc at start of line, and stop on any ML tag, also at start of line.

If a ABC sequence contains the characters '<', '>' (broken rhythm) or '&' (voice overlay), it must be enclosed in a XML comment (inside the ABC sequence as a ABC comment). Example:

%<!--
.. ABC sequence ..
%-->

Note that the ABC sequence of this file contains a music font definition (%%musicfont) that points to the file (../js/abc2svg.ttf) of this HTTP server. This would not work if this file tabac.xhtml would be put in an other server without the abc2svg font at the same relative path.
Usually, it is safe to have no %%musicfont definition. In this case, the internal font is used.