VexFlow: HTML5 Open Source Tablatures Editor

Geeky stuff with VexFlow which is an open source music notation tool in HTML5, and Javascript made to edit tablatures, and scores. I’m not going to  bother you with technical aspects that I don’t fully get myself yet. But the basic thing is that it is a web-based application that runs in the browser, and doesn’t require to install a software on the computer. VexFlow will mostly be interesting for the editors of guitar learning websites and blogs but I guess that if the forums around the web decide to integrate this solution then everybody will be able to use it to share tablatures on the different boards.

To write down a tablature you will have to use VexTab a specific language that doesn’t seem too hard to learn (see the VexTab tutorial). The edition box is used to enter the notes to be (dis)played (numbers as in normal tabs) associated with the number of the string. Then you can display playing techniques like bending or vibrato by associating the note with a code letter i.e. b for bending or v for vibrato.

The embedding of the tablature is made with TabDiv that allows the rendition of the tab via Javascript, CSS so there is no image file manipulation whatsoever. To be able to use TabDiv you will need to install several files (js, and CSS) on host server of the website on which you will display the tabs (see the full explanation of TabDiv).

I like the final rendition of these tablatures, and I think that VexFlow could really ease the tabs edition process for many editors of guitar lessons blogs, and websites as it skips the use of any external software (it runs in the browser), and you will be done managing lot of pictures.  If you want to know more about VexFlow you should check vexflow.com via @clementdelmas.

Leave a Reply

Your email address will not be published. Required fields are marked *