Music scores remain one of the best ways to record or share many musical ideas. If you’ve done even casual notation, you’ve likely had the experience of scrawling something down on a scrap piece of paper, manuscript or otherwise.

Imagine, instead, quickly scrawling something in the now-ubiquitous web browser window.

Gregory Dyke writes with a notation project he’s built with Paul Rosen; he says that it’s further along in its development than the notation project we saw last week. As before, it employs JavaScript and HTML5, and the Canvas element SVG support, rendering quickly in any modern browser right inside a web page. (Correction: it’s SVG, not Canvas, that makes this work, thanks to the raphaeljs library.)

Abcjs is an open source parsing and rendering tool for ABC written entirely in javascript, so it allows sheet music to be rendered as both standard notation and MIDI entirely with the browser.

Here are a couple ways to use this:

For rendering any ABC notation found on a web page as standard notation,
see http://drawthedots.com/abcplugin

For the simplest ABC editor in a web page, see http://drawthedots.com/abcjs

For a free on-line editor and tune storage website, see
http://drawthedots.com

Enjoy! And we’d appreciate feedback of all kinds.

Notes:
1) ABC 1.6 is mostly done, and many parts of ABC 2.0 are supported. We are actively working on improving the rendering.

2) We know that the rendering in IE is not as pretty as Firefox, Safari, and Chrome, but we’re working it!

Here, the ABC notation format is a standard, so you can simply type in or copy and paste any ABC-encoded text and render it right away.

It looks ideal for dropping musical excerpts or examples into a page, but this project even in its early stage offers another idea: why not quickly type in your notes in simple text characters, then store and share that score with others? There’s even instant music rendering.

Simple, lightweight examples do have a way of opening the door to more technically-involved discussions, and this is no exception.

ABC is nifty and easy, but it isn’t capable of representing more sophisticated scores in the way that the free Lilypond format is. I noted last week that Lilypond is nonetheless readable and easy for basic entry, even as it adds sophisticated features with a little more work. I think even having a web window with ABC is nice enough, and it should be possible to go from the simpler format (ABC) to other, more complex formats (MusicXML or Lilypond). But this question of how to interchange files remains one of interest. After the post last week, the project we saw spawned a long discussion in its blog’s comments on how interchange might work. Greg, for his part, concedes that “abc is quite powerful, but stops at complex multivoice scores where voices move across staves (simple multivoice and multistave is possible).” That could make putting Lilypond in the browser a useful activity, and since it is possible to go from MusicXML to Lilypond, it should enable MusicXML, as well.

As with sound synthesis, putting notation in the browser demonstrates how both the “desktop” app and the “browser” app can differentiate themselves. The browser focuses on quick, simple entry and sharing. The desktop app remains the tool for connecting to MIDI hardware, performing more sophisticated entry and layout, and project management. Far from competing, each gives the other greater purpose and a clearer sense of how the two design approaches can differ. Because a Web rendering engine like WebKit is also embeddable, the line doesn’t even need to be absolutely clear. I can imagine, for instance, Lilypond editors that use WebKit for lower-quality, real-time notation previews, prior to doing a full Lilypond render in PDF. (There are real-time PDF rendering libraries like Cairo, too, so I have no idea whether that makes sense, but the array of options open to developers is nonetheless expanded.)

The project is free and open, so let us know if you modify it somehow. (JavaScript-controlled, 3D-produced generative scores, perhaps?)

http://code.google.com/p/abcjs/

Updated: Gregory replies with an email, and it was useful enough to me that I’m reprinting it in full. He notes most importantly that ABCjs is capable of more sophisticated rendering than seen here, even if it doesn’t yet do as much as, say, the Lilypond renderer does.

Thanks a lot. You’re spot on with the note taking idea – I wonder whether this would be a good way to create a mobile browser app – still runs a bit slow on mobile safari though – about 8seconds for rendering on my 3g. Nice to see you discuss abcjs as a full blog post.

Just a note: we don’t use canvas, but svg, using raphaeljs to bridge across browsers.

In hindsight, we should probably put a more sophisticated example on the landing page. For example, the tunes below render quite nicely (although not with complete midi playback). We should probably finds ourselves a demo score which runs the whole gamut of several voices, ornamentation, chords, guitar chords, dynamics, etc.

Thanks again for the heads up

Greg

X:3
T: TEST: Erev Ba % —
C: from Israel
M: C|
L: 1/4
K:G
V:1
“G”dgf g/b/ | “Am”a3z | “D7″ab c’/d’/ b | “G”b3z | dgf g/b/ | “Am”a3z |
“D7″ab c’/d’/ b | “B7″b3z | “C”ceg>g | f/g/f/e/ e2 | “Am”Ace>e | “D”d>c B/A/G/F/ |
“Em”G2 E2 | “Am”A2 “D7″A/B/ G | (“G”G4|G2) z2 | dgf g/b/ | “Am”a3z |
“D7″ab c’/d’/ b | “G”b3z | dgf g/b/ | “Am”a3z | “D7″ab c’/d’/ b | “B7″b3z |
“C”ceg>g | f/g/ f/e/ e2 | “Am”Ace>e | “D”d>c B/A/G/F/ | “Em”G2 E2 | “Am”A2 “D7″A/B/ G |
“G”G>A B c/A/ | “G7″d>e =f/d/B/A/ [K:C] ||”C”G2z2| “Dm7″d/e/f/e/ d/c/B/A/ |\
“G7″G2z2 | “C”z/ G/c/B/ c/d/e/f/ |
g g/a/ g2 | “Dm7″f/g/a/g/ f/e/d/c/ | “G7″B/c/d/c/ B/A/ G| “E”^G>B e/d/c/B/|\
“F”c2 a>a | g/a/g/f/ .f .e |
“Dm”d2f>f | “G”e>d c/B/A/B/ | “Am”c/d/c/B/ A/G/F/E/ | “Dm”D/E/F/D/ “G7″G A/B/ |\
“C”c3 e| .g.a.g e/d/ |
GcBc/e/ | “Dm7″d3z | “G7″def/g/e| “C”e3z | GcBc/e/ | “Dm7″d3z |
“G7″def/g/e| “E”e3z | “F”FAc>c| B/c/B/A/ A2| “Dm”DFA>A| “G”G>F E/D/C/E/ |
“Am”c2A2 | “Dm”d2 “G7″d/e/c | (“C”c4|”Dm”c2) “G7″d/e/c| (“C”c4| c2) z2 |]
%
V:2 gch=0
“G”z4 | “Am”z4 | “D7″z4 | “G”z4 | z4 | “Am”z4 |
“D7″z4 | “B7″z4 | “C”z4 | z4 | “Am”z4 | “D”z4 |
“Em”G2Bd | “Am”c2 “D7″c/d/ B | “G”B>ABd | B>A G/A/ B| d2 z2 | “Am”A/B/c/B/ A/G/F/E/ |
“D7″D2 z2 | “G”z/D/G/F/ G/A/B/c/ | d d/e/ d2| “Am”c/d/e/d/ c/B/A/G/ |\
“D7″F/G/A/G/ F/E/D/C/ | “B7″^D/B,/D/F/ B/A/G/F/ |
“C”c2 e>e | d/e/d/c/ cB| “Am”A2 c>c| “D”B>A G/F/E/F/ |\
“Em”G/A/G/F/ E/D/C/E/ | “Am”A/B/c/^c/ “D7″d e/f/ |
(“G”g4|”G7″g2)z2 [K:C] || “C”GcB c/e/ | “Dm7″d3z | “G7″de f/g/ e| “C”e3z |
GcB c/e/ | “Dm7″d3z | “G7″de f/g/ e| “E”e3z | “F”FAc>c | B/c/B/A/ Az |
“Dm”DFA>A | “G”G>F E/D/C/D/ | “Am”c2 A2 | “Dm”d2 “G7″d/e/c | (“C”c4|c2) z2 |
Gede/g/ | “Dm7″f>e f/e/d/c/ | “G7″Bcd/e/c| “C”c c/B/ c/B/c/d/ |\
e e/f/ ee | “Dm7″f>e f/e/d/c/ |
“G7″Bc d/e/ c | “E”B>A ^G/A/B/G/ | “F”F2 A2 | c2 FE | “Dm”D2 F2 | “G”B2 e2|
“Am”e2c2 | “Dm”f2 “G7″f/g/ e | (“C”e4| “Dm”e2) “G7″f/g/ e | (“C”e4|e2) z2 |]

The mobile question is especially interesting to me; it may be that you need non-JavaScript, “native” SVG libraries, but porting that shouldn’t be impossible either way. I’d love to have a mobile Android sketchpad, especially since my Droid has a keyboard. I’ll look into some testing.

  • Jim Aikin

    Ah, yes … entering a score as a string of text code. One of the very first notation programs did it this way. I interviewed the author, back in the late '70s. This was at Stanford, and I'm thinking it was Julius Smith, but I could be wrong about that.

    What was interesting about it was that every object on what was destined to become the page (this was way pre-WYSIWYG) was described using parameters — distance from previous note and so on. My memory is that the parameterized object model was used, shortly thereafter, by John Chowning in the development of FM synthesis. Again, I may have the details wrong, but I remember being told that there was a connection.

    The DOS version of this software was commercially available at one time, I believe. I definitely poked around in it; I may actually have reviewed it. How time flies….

  • http://www.createdigitalmusic.com Peter Kirn

    Jim, you mean SCORE? Or one of the other apps?

    And yes, it's an old approach. If you think about it, even the pre-computer system of notation and engraving really took a parameterized object approach (further proof that object-oriented thinking is about systems, not about computers).

    It can seem primitive with graphical programs, but then, a lot of us use keyboards for input with Finale and Sibelius anyway. I think if a renderer were fast enough, you could meld the two techniques, even in systems like this and Lilypond.

  • http://www.myspace.com/jamesyanisko JamesY

    True story about using the keyboard to input notation in Sibelius WAY more than anything else – but I do love the instant feedback of the sound & look of it, so I can edit it RIGHT then if its not what is in my head.

    This just reminds me of my days as a computer programmer – long before i decided to pursue music. This is a good thing, as there were problems I could solve only with code – just like now in my writing, there are problems I can solve only with notation, and problems I can solve only with playing them out. Maybe I can add this to my list of ways to solve musical 'problems'

  • eric

    I tried pasting the more sophisticated example in, but there seems to be a problem with the quotation marks around chord symbols not being correctly interpreted….

  • Gregory Dyke

    Yep… seems Peter's email or blogging software added in some smart quotes.

    X:3

    T: TEST: Erev Ba % —

    C: from Israel

    M: C|

    L: 1/4

    K:G

    V:1

    "G"dgf g/b/ | "Am"a3z | "D7"ab c'/d'/ b | "G"b3z | dgf g/b/ | "Am"a3z |

    "D7"ab c'/d'/ b | "B7"b3z | "C"ceg>g | f/g/f/e/ e2 | "Am"Ace>e | "D"d>c B/A/G/F/ |

    "Em"G2 E2 | "Am"A2 "D7"A/B/ G | ("G"G4|G2) z2 | dgf g/b/ | "Am"a3z |

    "D7"ab c'/d'/ b | "G"b3z | dgf g/b/ | "Am"a3z | "D7"ab c'/d'/ b | "B7"b3z |

    "C"ceg>g | f/g/ f/e/ e2 | "Am"Ace>e | "D"d>c B/A/G/F/ | "Em"G2 E2 | "Am"A2 "D7"A/B/ G |

    "G"G>A B c/A/ | "G7"d>e =f/d/B/A/ [K:C] ||"C"G2z2| "Dm7"d/e/f/e/ d/c/B/A/ |

    "G7"G2z2 | "C"z/ G/c/B/ c/d/e/f/ |

    g g/a/ g2 | "Dm7"f/g/a/g/ f/e/d/c/ | "G7"B/c/d/c/ B/A/ G| "E"^G>B e/d/c/B/|

    "F"c2 a>a | g/a/g/f/ .f .e |

    "Dm"d2f>f | "G"e>d c/B/A/B/ | "Am"c/d/c/B/ A/G/F/E/ | "Dm"D/E/F/D/ "G7"G A/B/ |

    "C"c3 e| .g.a.g e/d/ |

    GcBc/e/ | "Dm7"d3z | "G7"def/g/e| "C"e3z | GcBc/e/ | "Dm7"d3z |

    "G7"def/g/e| "E"e3z | "F"FAc>c| B/c/B/A/ A2| "Dm"DFA>A| "G"G>F E/D/C/E/ |

    "Am"c2A2 | "Dm"d2 "G7"d/e/c | ("C"c4|"Dm"c2) "G7"d/e/c| ("C"c4| c2) z2 |]

    %

    V:2 gch=0

    "G"z4 | "Am"z4 | "D7"z4 | "G"z4 | z4 | "Am"z4 |

    "D7"z4 | "B7"z4 | "C"z4 | z4 | "Am"z4 | "D"z4 |

    "Em"G2Bd | "Am"c2 "D7"c/d/ B | "G"B>ABd | B>A G/A/ B| d2 z2 | "Am"A/B/c/B/ A/G/F/E/ |

    "D7"D2 z2 | "G"z/D/G/F/ G/A/B/c/ | d d/e/ d2| "Am"c/d/e/d/ c/B/A/G/ |

    "D7"F/G/A/G/ F/E/D/C/ | "B7"^D/B,/D/F/ B/A/G/F/ |

    "C"c2 e>e | d/e/d/c/ cB| "Am"A2 c>c| "D"B>A G/F/E/F/ |

    "Em"G/A/G/F/ E/D/C/E/ | "Am"A/B/c/^c/ "D7"d e/f/ |

    ("G"g4|"G7"g2)z2 [K:C] || "C"GcB c/e/ | "Dm7"d3z | "G7"de f/g/ e| "C"e3z |

    GcB c/e/ | "Dm7"d3z | "G7"de f/g/ e| "E"e3z | "F"FAc>c | B/c/B/A/ Az |

    "Dm"DFA>A | "G"G>F E/D/C/D/ | "Am"c2 A2 | "Dm"d2 "G7"d/e/c | ("C"c4|c2) z2 |

    Gede/g/ | "Dm7"f>e f/e/d/c/ | "G7"Bcd/e/c| "C"c c/B/ c/B/c/d/ |

    e e/f/ ee | "Dm7"f>e f/e/d/c/ |

    "G7"Bc d/e/ c | "E"B>A ^G/A/B/G/ | "F"F2 A2 | c2 FE | "Dm"D2 F2 | "G"B2 e2|

    "Am"e2c2 | "Dm"f2 "G7"f/g/ e | ("C"e4| "Dm"e2) "G7"f/g/ e | ("C"e4|e2) z2 |]

    (Peter, when you get it fixed, don't hesitate to remove this comment)

  • Gregory Dyke

    ick! it's the blogging software

  • http://www.blackblinds.org Paul Black

    There is clearly still work to be done on it, but it's already useful enough to recommend for casual use. Hope the development continues.

  • Pingback: What’s the difference between managing your own dedicated server and getting hosting service for one?

  • Pingback: Create Digital Music » iPad: Bloom, Setlists, Scores, Audio Palette, and Controlling Mac

  • Pingback: iPad: Bloom, Setlists, Scores, Audio Palette, and Controlling Mac | VJ Heaven

  • Pingback: Create Digital Music » Looking Beyond MIDI, What’s the Best Way to Represent Musical Notes Digitally?