How do you share print music? Chances are you print out your compositions from your favorite editor and then make a lot of copies down at the office supply store.

With VexFlow, we can now render compositions in-browser, without library dependencies and support for both CANVAS and SVG (okay, Raphael is required for SVG).

It can render both classical notation and guitar tablature, all with code like this:

var renderer = new Vex.Flow.Renderer(canvas,
  Vex.Flow.Renderer.Backends.CANVAS);
 
var ctx = renderer.getContext();
var stave = new Vex.Flow.Stave(10, 0, 500);
 
// Add a treble clef
stave.addClef("treble");
stave.setContext(ctx).draw();

This is all a little low-level for someone focused on displaying music, however, which is why 0xfe gave us VexTab.

Now you can render music with notation like:

tabstave
notes (5/2.5/3.7/4) 5h6/3 7/4 |
notes t12p7p5h7/4 7/5 5s3/5

tabstave
notes (8/2.7b9b7/3) (5b6/2.5b6/3)v 7s0/4 |
notes (5/2.6/3.7/4)v

tabstave
notes (5/4.5/5)s(7/4.7/5)s(5/4.5/5) (5/4.5/5)h(7/5) |
notes t(12/5.12/4)s(5/5.5/4) 3b4/5 5V/6

The kicker is that with his other library, TabDiv, such notation would automatically be rendered if contained within a DIV with a class of vex-tabdiv

• The sound of music is silence and sometimes a click
• The digits of MUSIC.js