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

All this goes to show is

[Anonymous Coward]

that no Web browser has a decent typographical engine.

(I know it is not a trivial task to create one, even for just Latin-based languages, or even just English.)

It has external dependancies

[tomhudson]

View the source, Luke:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Block google and see how well it works.

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:It has external dependancies

[mdda]

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.

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.

Re:It has external dependancies

[Anonymous Coward]

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.

Re:It has external dependancies

[coryking]

The official site recommends you load it from google. Why? Cause the fine folks at jQuery make a kick-ass javascript library, not a global content distribution network.

If you hotlinked the library from the official site, you'd basically be a leech and worse, your visitors would probably not get any of the benifits that come from loading jQuery from google (namely the fact the visitor probably has the google version in their cache already).

Re:It has external dependancies

[SanityInAnarchy]

Actually, even the minified version is 72k, not 24k,

It's 24k after gzipping. You do serve text content gzipped, don't you?

It's possible that there's a different version in play here, but the 24k figure is what I'm getting from the latest version.

And of course the only way to verify that the minified version doesn't pull in more stuff

jQuery? It doesn't.

since the source script is, for all practical purposes, semi-obfuscated.

That's like bitching that you can't figure out what Firefox is doing, because you only have a binary. It's jQuery! The original, un-obfuscated source is available, along with full version-control history! Unless they've gone out of their way to be difficult, you should be able to verify (with diff) that the version they are using is actually a particular version available for download from jquery.com.

If the "only" purpose was to run the script, a simple body.onload() would have done the job,

Except that's not what jQuery does. If your browser supports it, it's actually onDOMReady. There's a world of difference between those -- onload requires everything to be loaded, including images, movies, everything. onDOMReady only requires the HTML DOM itself to be finished loading, which is going to be considerably faster -- but it's still enough that your script knows what it's dealing with.

If your browser doesn't support that event, I believe jQuery will emulate it via polling. I'm not sure if it ever falls back to load.

But no, body.onload() is not equivalent. You could certainly do onDOMReady yourself, if you were really determined not to have external dependencies, but that could be said of anything included with a library.

as would calling the first function from an embedded script tag at the bottom of a demo page..

I'm pretty sure the only XHTML-compliant place to put script tags is inside the <head> tag, which makes sense. Progressive enhancement is good design.

Re:Copyright Infringement

[CRCulver]

The Recording Industry Association of America (RIAA), as its name suggests, deals with recordings. Copying of musical scores falls under the domain of music publishers, entirely separate organizations.

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.

Re:Good job. Need more.

[fbjon]

I read you post as: "I know some basic things about music and need others to know that I do."

I think you mean, "basic things about performing music..", and he actually has a good point. The accidentals are too small in proportion. Zooming out the test samples to about 75% makes them about equal in size to my printed scores, but then the accidentals have practically disappeared...

By contrast, the accidentals in the printed score are much larger. The central portion of each - the bottom of flats, center square of sharps is the same size as the note heads, and the extending lines make them 2-3 times taller.

Overall it looks good, but there's a few issues like this in there to iron out. Making scores easy to read is no easier than typesetting any other stuff.

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: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

Not beautiful, doesn't look engraved

[Anonymous Coward]

Th notes for that music could fit onto a rectangular grid. It looks computer generated, and has not taken into account things that make note placement more "beautiful". Notes should generally line up on the vertical, but the width of space taken up by each whole note shouldn't be constant. I see lots of wasted space and visual gaps in what has been rendered in this demonstration.

See here for more details:
http://lilypond.org/about/automated-engraving/software

Re:Not beautiful, doesn't look engraved

[jc42]

Hey, it's standard practice to respond to alpha "proof of concept" examples by ignoring the achievement and picking apart the cosmetic details.

An experienced developer will take this as meaning "We're really impressed by what you've shown us, but we can't admit that (for some unstated reason), and we can't find anything consequential to criticise, so we'll attack you for not having delivered a polished, finished product." I.e., it's really high praise camouflaged as criticism.

I've seen it over and over.

Re:HTML5 Canvas not supported on this browser. (IE

[TheRaven64]

He's not talking about IE, he's talking about IE9. According to the numbers from Wikipedia, FireFox has 31% of the market, IE 8 has 22%, IE7 has 14%, IE6 has 21%. No single version of IE has more market share than FireFox and, given that IE9 won't run on XP, I doubt that IE9 will gain market share any quicker than IE8 has done. IE market share overall has been dropping by at least 1% per quarter for a few years. IE9 will face an uphill struggle to gain a significant market share.

A third music mark-up language?

[john.wingfield]

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.

Re:A third music mark-up language?

[u38cg]

MusicXML is extremely clunky to work with. TeX is fine as a backend, though fiddly to set up, but for working with...ugh. Lilypond is good, though the learning curve for the basics is really too steep. Another alternative is ABC, which I use a lot. However, more to the point, our hero hasn't settled on a markup language yet - the whole thing is drawn from primitives.

Re:Music typesetting isn't as easy as it looks

[ommerson]

The layout of score conveys enormous amount of semantic information about music - for instance, the horizontal position of notes align across the staves of multiple parts if the notes start concurrently. In multi-voice music, stem direction is used to indicate which voice notes belong to, and therefore also implies phrasing. There are many other examples of this kind.

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.

Re:Music typesetting isn't as easy as it looks

[AthanasiusKircher]

- 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.

Re:Music typesetting isn't as easy as it looks

[ommerson]

No it doesn't. The best you can get is start and stop time of each note and its pitch, and if you're lucky you might have a tempo-map, tempo and time-signature.

Converting from MIDI into score is difficult - particularly so if the music is not synchronised with the beat clock used by MIDI. Variation of the length of notes relative to their notated duration and uneven distribution of beats (or their subdivisions) is an inherent feature of human performance, but makes process of determining the note length difficult when converting MIDI to score. In practice, some degree of quantisation is required to prevent conversion into ludicrously complex rhythms.

Besides notes, there are enormous numbers of score features that MIDI cannot represent - such as slurs, multiple voices, articulation marks, dynamics markings and so on.

There is a Yamaha MIDI profile called XF MIDI that can carry the additional data required to reconstruct a score. It's used by the score display functionality in various Yamaha keyboard models. Realistically, the only way to use it export the output of an engraving or optical note recognition package into it. As far as I know it is not supported by any of the major engraving platforms.

Since MusicXML can optionally carry presentation data for playback, this is a much more realistic prospect as there is plenty of application support in the DAWs, and also in Cubase which has score editing capabilities as well.