Converting ABC to a webpage

To make a webpage for an ABC score file foo.abc you have to do the following:

Here is a very detailed step-by-step instruction with an example that will make a working webpage. And here are the intermediate files produced in the steps, so you can compare your results.

• Make sure that your ABC file meets the following requirements:
  1. The metre shlould be a fraction, like M:4/4 or M:7/8. Anything else, like M:C, will not work.
  2. There should be a tempo definition in the same units as the metre. So M:3/8 goes with Q:1/8=... and M:3/4 goes with Q:1/4=... Different units will break the synchronisation. Of course, the audio file you use should have been made with the same tempo. There may be many tempo definitions in your ABC but always in the metre unit.
  3. SvgParse cannot deal with upbeats. So make sure all measures are full measures and contain the number of beats specified in the metre.
  4. A scale factor smaller then 1.0 should be used when typesetting with abcm2ps. So include a scale factor in the abc code to be sure, e.g.: %%scale = 0.8 (with 1.0 svgParse raises an exception)
  5. Repeats should be unfolded to match the audio. SvgParse does not perform repeats.
• Make an audio file foo.ogg or foo.mp3 from your abc file and place it in the same directory as foo.abc. The audio can be synthesized or a recorded live performace. When you use a live performance, you have to synchronize the score to the audio using the build-in syncing capabilities of the webpage that svgParse produces. (see full documentation)
• run abcm2ps with the -X option to get a single .xhtml file (containing all score pages produced by your ABC file):

  > abcm2ps -X -O= foo.abc
  

  Do not forget to include some formatting instructions in your abc file to make the page size suitable for the web. And make sure the scale factor is smaller than 1.0
• run svgParse to convert this .xhtml file into a webpage:

  when you have Python:	or if you use the Windows executable:
  > python svgParse.py foo.xhtml	> svgParse.exe foo.xhtml

  Now you will find a file foo_play.html in the same directory as foo.xhtml. Open this file in your browser and enjoy.

Read the full documentation where you will find all keybord shortcuts and an explanation of the build-in synchronization capabilities of the webpage.