Abcjs - an open-source JavaScript musical notes rendering engine(drawthedots.com)
drawthedots.com
Abcjs - an open-source JavaScript musical notes rendering engine
http://www.drawthedots.com/abcjs
7 comments
Great highlighting based on caret position, easy-to-read syntax and the output updates quickly.
Very well done.
Very well done.
Very excited about this - as a musician/programmer, I've been looking for a way to easily embed notation in q sit for a while. ABC is a great choice - very simple to lean. You've given me a new weekend project-posting the notation for my music! Thanks!
Brilliant! I wish I had an excuse to use this for something. ;)
Looking at the SVG source, the notes are rendered using <path> -- I'm wondering if higher level objects could be used like lines and ellipses
it seems to be occasionally drawing staff lines on partial values to where the aliasing falls half-alpha on two pixel boundries. probably just need to drop the precision of the y.
Lilypond has for a long time made a big deal about the quality of their output (http://lilypond.org/web/about/automated-engraving/). But to my musician eye, it looks good but not exceptional.
The rendering of Abcjs in this example, while not perfect, is pretty impressive for something that's running in your browser. It seems pretty lightweight; Lilypond, in contrast, is extremely large and slow. And its convenient features like as-you-type rendering and highlighting the corresponding part of the text are really compelling.
I hadn't actually heard of ABC notation before. Apparently there is a language "standard" published, though it's really just a definition (it is not adopted by any standards bodies AFAIK): http://abcnotation.com/wiki/abc:standard:v2.0
I'd love to see some more substantial examples of music in this format. It looks really promising, but music notation has tons of hard cases, and amateurish typesetting really stands out. I sing from stuff on cpdl.org all the time, and the low-quality editions have obvious problems, like they'll get the spacing wrong, or they'll have awkward line crossings.