Monday, July 12, 2010

Durations, Code, and Posters

The last few weeks have been relatively quiet on the VexFlow side. I've been vacationing in Cape Cod with my wife and 3-month-old.

Obviously, vacation is never fun without a few good coding sprints. I started work on incorporating standard notation into VexTab.

The first thing I needed to do was create a class to convert fret-string pairs to notes. In order to support alternate tunings, I created a Tuning class, whose sole responsibility is to return the correct note for a given fret-string pair, based on the instrument type and tuning.

So, to convert the fret-string pair "5/2" on a 5-string bass to standard notation, all I need to do is:

var tuning = new Vex.Flow.Tuning("G/4,D/4,A/3,E/3,B/2");
var note = tuning.getNoteForFret(5, 2);

The next part was augmenting the language to render standard notation when requested. I modified tabstave to accept key=value parameters, and added a parameter called notation. When set to true, it renders standard notation above the guitar tab.

VexTab with Standard Notation

I also started work on basic duration support and auto-beaming. I don't have much to show for this yet, because they're currently a bit intertwined, and automatic beaming is harder than I anticipated (yet again!)

In other news, I open sourced the VexTab parser, so you can learn more about the language or use it in your own rendering engines. It is currently slightly coupled to VexFlow, but pretty trivial to decouple. (I'm going to fully decouple it as this project progresses.)

The parser is licensed under the MIT license, and is available on GitHub at:

Finally, some readers who liked my previous Chrome Poster from Source Code post requested posters for other open-source projects. I generated posters for Firefox, Linux, and FreeBSD, and made them available on my other side project: Wicked Mean Posters.

Firefox Poster from Source Code

More next time!


  1. Nice Job Mohit. I'm glad to see the notation again which makes a huge part of the "wow" effect. But as I see from the attached pictures: The standard notation alignment is wrong. Shouldn't be the notes above the tablature number.

    I just uploaded my current development build to my showcase site. It would be awesome if you could give me some feedback:

  2. Really neat stuff! There's an interesting thread mentioning your work here over at the music notation project site:

  3. @Danielku15 - The alignment is actually just slightly shifted because the treble glyph occupies more space than the "TAB" glyph, something I didn't really notice. I just fixed that. :-)

    I looked at your site, and it looks good. I noticed some hiccups in the beaming and accidental placement. Is that a remnant of TuxGuitar?

    @William - Thanks for pointing me to your thread. Belle, Bonne, Sage is incredible! Good job! I'm itching to dig in and see how you got "Bike Ride" to render.

  4. Hey 254

    Just wanted to say I found your TabDiv component via reddit (or something similar) and I absolutely love the idea!
    I'm currently working on using pieces of you API in conjunction with a ASCII tab decoder I'm writing to do a little conversion. Ill letcha know if I have any revelations along the way.


  5. Hi, I really love using TabDiv so far, but I have a question about the tuning keyword. I really don't understand how to use it for alternate tunings. I see that the letter corresponds to the string, but what is the number after the slash supposed to indicate?