vexflow: HTML5, Canvas, JavaScript library for music and guitar tablature

In Episode 0.3.4, Zed Shaw and I talked about the sad state of guitar tab sites, and he mentioned VexFlow as a project to watch. VexFlow is a set of open source projects from Mohit Muthanna that use HTML5, <canvas>, and SVG to render embeddable guitar tabs and music in blog posts or web pages.

VexTab

Instead of using the ubiquitous (yet extremely free-form) ASCII tabs with which most guitarists are familiar, VexFlow introduces its own tablature and music markup language:

VexTab is a language that allows you to easily create, edit, and share guitar tablature. Unlike ASCII tab, which is designed for readability, VexTab is designed for writeability.

VexTab is easy to write

tabstave
notes 0/4 14/3 13/1 14/3 0/4 12/3 12/1 12/3 | 
notes 0/4 10/3 10/1 10/3 0/4 9/3 8/1 9/3

tabstave
notes 0/4 5/3 5/1 5/3 0/4 4/3 3/1 4/3 |
notes (3/1.4/3)s(1/1.2/3) 

tabstave
notes 0/5 0/5 3b4/5 0/4 3b4/4 0/4 |
notes 2/3 0/1 3/2 2/3 0/1 3/2 2/3

This intro to Dead or Alive in VexTab can be beautifully rendered into guitar tablature using TabDiv, VexFlow’s HTML5/JavaScript/<canvas>/SVG embedding library.

VexFlow also supports clef-based music notation as well.

tabstave notation=true
notes :8 [ 5s7/5 ] :q (5/2.6/3)h(7/3) [ :8 6/4 :16 7p5/5 ]

becomes

For browsers without <canvas> support, TabDiv supports SVG with the help of RaphaëlJS from Dmitry Baranovskiy.

You can try your hand at writing VexTab in your browser with Mohit’s awesome tutorial.

[Source on GitHub] [Homepage] [Tutorial]