Beautifully Rendered Music Notation With HTML5

An anonymous reader writes "This is incredible. This guy has built a music notation engraver entirely in JavaScript, allowing for real-time music editing right in the browser. Here's a demo. The library has no external dependencies, and all the glyphs, scores, beams, ties, etc. are positioned and rendered entirely in JavaScript."

Comments

Good job. Need more.

[Corf]

I'd like to see accidentals rendered larger. Check Wikipedia and you'll see they're as large as the note bodies; check this guy's notation and they've gone all squinty. When you're a musician and you're playing notes that suddenly have to be modified, the last thing you want is to break concentration by trying to figure out which modification to apply. These things need to be properly proportioned. Time signatures would be handy. All that said, this looks like good proof-of-concept. I'd use the hell out of it should it become available.

Only relevant

[toxygen01]

part for the coders is:
http://0xfe.muthanna.com/jsnotation/vexnotation.js

this is the code responsible for generating the content.

Re:Not Sure if You Can Call That a Demo

[Anonymous Coward]

Huh? The linked demo is a full demo rendered using the canvas element. There's no parser but the generation code is launched via jQuery is clearly visible at the bottom of http://0xfe.muthanna.com/jsnotation/vexnotation.js :

function VexNotationDemo2

Re:It has external dependancies

[maxume]

http://jsbeautifier.org/

Try not to get too hung up on deciding if the name is impossible, it works great.

Re:It has external dependancies

[AdmiralXyz]

He's just using loading the jQuery library from Google. The jQuery library is FOSS though (and consists of that single file), he could just as easily store it on his own server and is probably using Google for convenience's sake. I suppose technically jQuery is a dependency, but it's just JavaScript itself and so many people use it that I basically consider it part of the language now.

Re:Does'nt work in Firefix 3.6.3

[slim]

It's a demo of the rendering engine. Those are not screen shots. What you're seeing is canvas elements drawn on by JS.

It doesn't look as if he's done interactivity yet.

Re:Not Sure if You Can Call That a Demo

[ewg]

Firefox apparently lets you view or save the current state of a canvas element in PNG format. If you inspect the web address of the PNG, you'll see it's a data: URI.

data:image/png;base64,iVBORw0KGgoAAAA

This capability doesn't seem to be present in Apple Safari; Chromium has an open feature request for it.

http://code.google.com/p/chromium/issues/detail?id=19277

Re:It has external dependancies

[SavedLinuXgeeK]

Looking at the source code, it only uses jQuery for an on page load handler. The library itself doesn't have any references to jQuery or to the '$' context that jQuery uses. He probably could have used a body onload tag to achieve the same thing, but then when pushing new web standards and using methodologies from the early 90's, this was probably the safer path.