Music Notation with HTML5 Canvas

I spent a few weekends trying to scratch an itch. While looking for online tools to create and render music notation, I was mildly disappointed. The only real options were crummy flash based sites or clumsy server-side image renderers. Neither of these were particularly appealing.

So I pulled up my sleeves, and cooked up a full-fledged JavaScript API to engrave musical notation directly in the browser with the HTML5 Canvas element.

Here's a demo: HTML5 Music Notation Demo

The library has no external dependencies, and all the glyphs, scores, beams, ties, etc. are positioned and rendered entirely in JavaScript.

One of the cool things about this is that I can now build interactive music sheets that respond to user events like score editors.

So here are all the features I have so far.

1. Basic staff and chord support.

2. Accidentals and beams.

3. Support for all note values with correct rhythmic positioning.

4. Support for rests, ties, and multiple voices. (Note the positioning of the notes.)

5. Support for guitar tablature.

6. Multiple voices in both staff and tab scores.

7. Broken bars, odd-timings, custom glyphs, basic interactivity, and a full suite of unit tests (I love QUnit).

I have a fair bit of work to do before I can make it available. In particular, I want to build a simple language that allows users to easily create scores. Something along the lines of the following:

score {
  title: Hip Tune
  artist: Hip Person

  bar { v8 C4 D4 E4 F4 (C4 E4 G4) } 
  bar { v8 C4 D4 E4 F4 (C4 E4 G4) } repeat 3
}

The above is just an idea - I haven't really given it much thought. But the intent is to make the language easy to read and accessible to non-geeks. I'm open to suggestions related to what the language should look like.

Let me know what you think.