What is the correct way to add the music editor abcjs to my website?

Question

1) Since its behavior seems to be similar to the behavior of mathjax (see for instance, Mathjax analog for lilypond, I was expecting to include in the a link such as

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [["$","$"],["\\(","\\)"]]
    }
  });
</script>
   <script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
</script>

However, I was not able to find. Is there a link like this?

2) I am using a markdown editor and I can tell that mathjax is being called whenever it finds the inlineMath in the code above. How could my markdown editor know if this is a call to abcjs or just a sequence of "normal text"?

Every help will be very appreciated.

score 2 · Accepted Answer · answered Feb 24 '15 at 22:10

First, you should know that abcjs is not an editor but a javascript component, you can use to build an editor, as pauls shows. But in those examples the editing part is a regular textpane. Your example shows that there is a significant start/end pattern (for tex it is "$" resp. "$" and $" to delimit the tex code.

For abc you could try to use

"\nX:" respectively "\n\n" but this is not very robust.

You could use or fenced code blocks or github flavored markdown, depending on the markdown processor you are using. Then it should be possible to extract abc and hand it over to the abc processor.

This is the code I use in Zupfnoter (https://github.com/bwl21/zupfnoter). Suppose the extract of abc code delivers it in the variable abc_code.

    var element = getElementById("#tunepreview");
    var paper = Raphael(element, width, height);
    var parser = new ABCJS.parse.Parse();
    parser.parse(abc_code);
    var tune = parser.getTune();
    paper.clear();
    printer.printABC(tune)

HTH

score 1 · Answer 2 · answered Feb 24 '15 at 20:24

I'm not sure exactly what you're trying to do, but did you read this first? https://github.com/paulrosen/abcjs/blob/master/README.md

If you are trying to enter music using a textarea then you'll want to follow the instructions for "abcjs editor". There are stripped down demos mentioned in the readme.

What is the correct way to add the music editor abcjs to my website?

2 Answers2