If I were going to start a project to map elements of a musical score to HTML5 custom attributes, I would probably start with something like Lilypond, which has a convenient formal specification:<p><a href="http://lilypond.org/doc/v2.12/Documentation/user/lilypond/index.html" rel="nofollow">http://lilypond.org/doc/v2.12/Documentation/user/lilypond/in...</a>
Given that all of the graphic elements needed exist as Unicode, and that there exists code to detect specific fonts on the viewers machine, I'd like to see them used as the default rather than the somewhat sketchy drawings as shown. Just a suggestion...
Check out vextab/vexflow, no need to re-invent the wheel. It's a complete (and open source) framework for music/tab notation:<p><a href="http://vextab.com/" rel="nofollow">http://vextab.com/</a>
Hey @cgcardona, this is really cool, but the 'fork me on github' tag in the corner doesn't really work well on Webkit browsers.<p>With the latest chrome, you can't see "fork me on github" - only "cause i rock" backwards - this is a known bug with reverse css but is easy to work around.<p>In Safari v5, you can see 'fork me on github' but it disappears on mouseover.<p>Very cool demo though.
I can't get it to work - none of the examples in fact. I'm running Chrome Mac Dev Channel (v13.0.782.4). Clicking any of the buttons causes nothing to happen whatsoever.<p>One error is shown, when a button is DOUBLE-clicked (does not appear on single click), in the output console: "Error in event handler for 'undefined': Error: INDEX_SIZE_ERR: DOM Exception 1"