Sunday, May 16, 2010

Cleaning up the Cruft

I spent most of this weekend cleaning up the HTML5 music notation code - tests, refactoring, style fixes, etc. While doing this, I threw away lots of cruft, and started rewriting almost all the layout and formatting code. After looking at and studying lots of scores and tabs, it turned out that I really had to rethink the architecture of the layout management pieces, to allow for the correct formatting and placement of modifiers, accidentals, multi-voice note-heads etc.


I now have a much nicer design that should accommodate for these intricacies nicely, and am part way through implementing it. The design involves maintaining separate contexts for groups of Tickables (which is an abstraction for anything with a duration, such as notes, tabs, lyric-pieces, or chords) and Modifiers (an abstraction which includes accidentals, dots, bends, etc.) Higher-level formatters can be plugged in that work within these contexts to size, kern, and position the glyphs.

On the testing front, I have about 75 tests in, which its still barely enough to test the different scenarios and edge cases that occur in musical notation. I tend to add the tests for different components as I have a clearer picture of what the API looks like, primarily to avoid having to incessantly rejiggle the test code. One thing's for sure - I love QUnit, which is jQuery's JavaScript unit-testing suite. It's functional, elegant, and extremely simple to use.

All you need to do is write your tests, and QUnit takes care of managing, running, and reporting.

Anyhow, I do have a few things to show for all of this. First, is the support for note bends in tablature. Notice how the lower bend is pushed further to the right? This is because they're in the same ModifierContext.

String Bends

I also added slides, hammerons, and pulloffs.


I fixed the size of the accidentals. (I hope this is correct.)

And finally, note-heads are correctly displaced for notes that are right next to each other.

Displaced Note Heads

That's all for this week, folks!


  1. Can't wait for it to be ready!

  2. Have you seen the MusicXML test suite, there are a lot of really good tests there. it is referenced in the discussion on the test cases can be found here:

  3. Will this support also lyrics?

  4. I love this. Both the idea and the realization. It looks perfect and I'm looking forward to reading up on your progress. Let us know when you're making things open-source, so everybody is able to contribute.

    Nice work!

  5. @varno Thanks for the great link! I was looking for something like that.

    @atorox Yes, my current plan is to support Staves, Tabs, Chords, Lyrics, and Rhythm slashes.

  6. I'd like to just say this is awesome. I ran across your work a few days ago on Slashdot.

    As a musician and otherwise geek I truly appreciate the work you have done here. I can't wait until you get it up on a repository.

    The first thought I had was you could make a bouncing ball type of play back where you could set a certain tempo. Really the possibilities are almost endless. I'm really kicking myself for not having previously thought of this.