Slashdot Mirror
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."
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.
The pain was excruciating and the scarring is likely permanent, but that just means it's working.
part for the coders is:
http://0xfe.muthanna.com/jsnotation/vexnotation.js
this is the code responsible for generating the content.
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 :
http://jsbeautifier.org/
Try not to get too hung up on deciding if the name is impossible, it works great.
Nerd rage is the funniest rage.
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.
Dislike the Electoral College? Lobby your state to join the National Popular Vote Interstate Compact.
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.
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
org.slashdot.post.SignatureNotFoundException: ewg
He's using google so that people's browsers have a chance of retrieving their cached version, loaded from another site. This is the Right Thing to do.
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.
je suis parce que j'aime
We already have MusicXML and TeX/LilyPond for music mark-up. I'm not sure what benefit there is in a completely new mark-up language. However, an open-source web rendering tool for these languages would be extremely useful.
Do you not see the "min" in the script file name? which means its been "minified", which means the whitespace has been removed, which pretty normal for JS files these days. makes the file much much smaller to ease transport across the wire, and a subtle way of confusing casual JS newbs (like your self) as a very futile attempt at security.
There are also lots of examples where layout improves the usability of score. Some of them are really quite subtle with the results looking 'right' or 'wrong' to an experienced musician and are tied up with how musicians actually used scores - for instance pattern matching on chords and phrase shapes rather than interpreting each note dot.
As for implementation technologies, it's more a case of tools and libraries available. If converting from MusicXML, there's an awful lot of heavy lifting involving XML, and having decent collection classes makes the data structures and algorithms much easier to implement. I'm currently implementing in C#.Net, but would have been equally happy with C++/STL/Boost and a XML to object mapping layer of some kind.
- What proportion of users really care about the finesse of the layout? Most people are happy with MS Word's typesetting, and don't really notice the improvement in a TeX typeset document, for example.
I'll admit that it does take a trained eye to actually spot the differences in a TeX output versus something crappy from Word. But much of the improvement with TeX, though subtle, can actually facilitate reading. I don't know if those effects are really large enough to measure well, though. I notice them because I know they are there.
Music notation is a different animal. You can usually read text at your leisure, and if you misread something the first time, you can go back and read it again. With music notation, you should be able to read it accurately in real time, and that means any little thing that you stumble over can be an annoyance to a performer. Suddenly, you feel the need to mark up the score to point out that sharp you missed, the extra beat that was obscured by poor spacing, etc.
Obviously, standard notation applications have been producing crap layout for decades, so I suppose people have gotten used to it. But I have done a lot of work with Finale and Sibelius (for example), and I've used music typesetters that are better at spacing (e.g., Lilypond). The Lilypond output actually is easier for me to play from, even in pieces I've written or know really well. Yes, this is anecdotal evidence, but I have a lot of friends who are professional musicians that have agreed (even if they use Finale or Sibelius themselves because they are easily available and WYSIWYG). Finale and Sibelius have gotten a lot better over the past decade, but a lot of that improvement has to do with better automatic spacing algorithms.