Javascript music notation and rendering
January 11, 2013 12:40 PM   Subscribe

VexFlow is an open-source web-based music notation rendering API which utilises the VexTab open specification to render notation as a client-side canvas [githubs 1 2] [tutorials 1 2].
posted by urbanwhaleshark (11 comments total) 33 users marked this as a favorite
This is really neat. Thanks.
posted by captaincrouton at 12:58 PM on January 11, 2013

Very cool! Music notation software is a deceptively difficult problem, moreso than most people realize. There is no canonical way of representing a melody. I'll be following this project, because I'm interested to see how they deal with multiple voices ("layers" in Finale), especially with stacked rests and unusual rhythms.
posted by spiderskull at 1:18 PM on January 11, 2013

Nice job of rendering the short example code (shown when opening the page with JS off) in FF. At first glance the code looks a little daunting.

Very nice for displaying short passages, but entering a whole page that way could be tedious (and mistake-prone). With some kind of macro-aid for that, this has a lot of potential
posted by Twang at 1:50 PM on January 11, 2013

Amazing. Very guitar oriented, no?
posted by signal at 1:51 PM on January 11, 2013

Yes, signal, it would be nice if this supported other instruments. Madness lies in the way of banjo tab, tho'.
posted by scruss at 2:12 PM on January 11, 2013

Their pastebin/wiki/bloggy-thing is probably the killer feature here. I could see this becoming very, very popular....
posted by schmod at 2:13 PM on January 11, 2013

Very cool stuff here. Definitely a project I'll be watching...

signal, I'd agree that the language and tablature is very guitar-oriented. Which is fine, but I feel like it should be more flexible to at least allow for other instruments. A simple example is bass tabs - this is almost like guitar tablature, but with 2 less strings to manage. Sure, I could represent that with the VexTab language, but it is just a tiny bit clunky. But what if I have some music on a 7-string guitar? Or maybe I am tabbing out some Presidents of the United States music, and I want to throw up some 3-string power?

The tuning parameter also suggests a very guitar-centric view. What if I wanted to put out some ukulele music, where the tuning is a bit different from the standard options they give (notwithstanding the "number of strings" limitation)? Even with a guitar, I can't exactly tab out my not-yet-invented Pigg Tuning with this language.

All that aside, if you turn the tablature stuff off and focus on the pure music side of it, it is quite fascinating. Back in college, I wrote a reader for ABC notation for a couple generative music projects. This is is admittedly a much simpler language than VexTab, but representing music in a way which is both human-readable and computer-readable is a much more interesting problem than most realize.

There's quite a bit of features here - certainly more than I saw in ABC notation - and you can tell he spent quite a bit on the rendering side of things. I think this could be gold if just a little more work is done on the input side of the equation. Other than making it a little more instrument-agnostic, I'd be interested in seeing a visual way to enter data in the language. For example, an HTML5-based widget that allows you to select quarter-either-sixteenth-etc notes and click on the stave to place them, all while seeing the changes in the code as they update in real time.
posted by mysterpigg at 2:39 PM on January 11, 2013

Why use VexTab when LilyPond is so much more powerful?
posted by Doleful Creature at 5:32 PM on January 11, 2013

Why use VexTab when LilyPond is so much more powerful?

VexTab appears to do automatic guitar tab to notation conversion (no need to know what note it is). I do not think LP does this.

That said, LP is the best engraving software I've ever seen. If someone is feeling spry, they should use something like Emscripten and compile LilyPond's C++ code (and a Scheme interpreter) into JS, with an HTML5 canvas output. Step 3: $.
posted by hanoixan at 5:52 PM on January 11, 2013 [1 favorite]

Aren't there LaTeX packages that do this very, very well already? Couldn't we just adapt the backend to output to something usable online?
posted by Canageek at 10:05 PM on January 11, 2013

Too bad that the sample that shows in your browser when you access the page has 4 beats in the first bar, and 5 in the second ... not quite the best advertisement!
posted by woodblock100 at 12:33 AM on January 12, 2013

« Older Violence is so good   |   Unreleased Celebrity Fragrances Newer »

This thread has been archived and is closed to new comments