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

Re:All this goes to show is

[K. S. Kyosuke]

Actually, a "Tex2Js" distribution of TeX is not entirely unconceivable. :)

Re:All this goes to show is

[maxume]

People are already playing with some parts of it:

http://www.bramstein.com/projects/typeset/

Re:All this goes to show is

[Anonymous Coward]

Yes but if you're going to get arsey about typography, why stop with Knuth? *Real* typography geeks say Knuth got everything wrong.

Re:All this goes to show is

[K. S. Kyosuke]

Links, please - I'm interested in that.

Re:All this goes to show is

[Chris Newton]

Hi, I’m a real typography geek. (Chorus: “Hi, typography geek!”)

*Real* typography geeks say Knuth got everything wrong.

Sure we do. We know Knuth was crazy to talk about paragraph-based hyphenation and justification, and it is madness that the Knuth-Plass algorithm remains the gold standard in H&J today and something that only TeX itself, InDesign, and a few high-end specialist packages can match even now. We hate all those fiddly thin spaces that you have to type manually, too; we’d much rather just have our adjacent quotation marks and superscripts clashing.

Speaking of superscripts, we know Knuth’s font design skills were appalling as well. Anyone could design a system of fonts that was still clearly legible when used to typeset mathematics with sub-subscripts at 4/5pt on the one hand, yet provided extensible brackets surrounding multi-line expressions without looking overly large on the other. We know this from the vast number of font families available from the world’s leading type foundries today that do the job, and the way mathematical journals have given up on TeX because modern fonts provide a much wider range of mathematical symbols that are still clearly distinguishable from any Latin or Greek glyphs that may appear nearby.

Maybe TeX was just behind the times, though. After all, in an era when TeX could only typeset a variety of proportional fonts with intelligent hyphentation, ligatures and correct punctuation, at a useful range of sizes, in a way that could survive photocopying a research paper and still be legible, the world’s serious typographers were probably already using word processors that could render a fixed size, monospaced font on their dot matrix printer with underlining!

TeX’s handling of fonts is archaic by modern standards, of course, though updates like XeTeX do a much better job when it comes to things like OpenType and Unicode. However, in fairness, Knuth developed TeX many years ago, at a time before these modern standards were a glint in their metaphorical parents’ eyes. I think it’s rather unfair to criticise on this basis, and much of what he did has set the standard for three decades.

Getting back on topic, if the person or people behind the tool we’re discussing can do half the job for musical notation that Knuth did for mathematics, it will be a very fine achievement indeed. As with mathematics, it is relatively easy to scribble musical symbols in a way that is technically correct, but rendering music in a way that remains clear and effective even when read at speed in large volumes is quite a different thing. Nitpicking about some of the typography in an early demo seems a little unfair, given the already high standard of the overall rendering.

Re:All this goes to show is

[fractoid]

All this goes to show is

that this guy has written something fucking sexy. Well done, sir. That looked as good as any print music I've ever seen.

Re:All this goes to show is

[BrokenHalo]

People are already playing with some parts of it

There are also non-javascript tools that have been doing this sort of thing for a long time. A particular favourite of mine, specifically devoted to lute tablature, is to be found here. This OSS program has been around for many years, and does not generate modern music notation, but it illustrates just how powerful PostScript can be when used for the purpose.

Re:All this goes to show is

[pz]

We know Knuth was crazy to talk about paragraph-based hyphenation and justification, and it is madness that the Knuth-Plass algorithm remains the gold standard in H&J today ...

I love the fact that Plass showed page breaking to be NP-complete in his PhD thesis at Stanford.

I hate the fact that the various Office-class word processors do not implement line breaking using the Knuth-Plass algorithm. It's not like there's any patent preventing them, and the result is *always* superior. Someday, perhaps we'll even get it in our web browsers. I can dream, can't I?

Re:All this goes to show is

[NormalVisual]

It does look very nice. Unfortunately, after years and years of having played in pit orchestras for various theatrical productions, I've developed a distinct preference for the look of hand-written music done by a competent transcriber. I don't know why though - it's often misaligned and ugly, but somehow I just find it easier to read than typeset music.

Re:All this goes to show is

[orgelspieler]

That looked as good as any print music I've ever seen.

I recommend that you read Lilypond's essay on the topic. This is an OK start, but there is a long way to go before this is even remotely as good as professionally printed music. This is even worse than Finale scores.* I suggest you look at Noteflight or Scorch for other examples. Specifically, the noteheads are small, the stems are too long, and the whole rest should be centered in the measure. Maybe Han-Wen can give him some pointers.

* I used to hate reading Finale scores back in the 90's. That was hot shit back then, but I always found it sterile and blocky. Lifeless, boring, etc. Luckily most homebrew guys have switched to Sibelius, which is somewhat better.

Re:All this goes to show is

[Anonymous Coward]

The tool that did half (double? it took me some 10 years) the job Knuth did already exists. It is called lilypond (http://lilypond.org), and implements a generalized from of the Knuth Plass algorithm for linebreaking. One of our clever hackers extended the algorithm to also handle skyline vertical kerning between lines of music. It also has optically scaled fonts.

See also

http://lilypond.org/doc/v2.13/Documentation/essay-big-page

for some in depth backgrounds

Han-Wen
(too lazy to log in)

Re:All this goes to show is

[acheron12]

I believe that LilyPond wins the geekiness award when it comes to music typography. It's open source too!

HTML5 Canvas not supported on this browser. (IE8)

[Rod Beauvex]

I thought Microsoft was pushing for HTML5?

Source is obfuscated

[Anonymous Coward]

This is certainly impressive, but come on, don't make us run the code through a formatter just so we can understand and learn from it. LAME.

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

[Anonymous Coward]

Block google and surely the world would come to a grinding halt...

Re:It has external dependancies

[eldavojohn]

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.

I think you're confusing his blog site with the actual library. From his blog posting:

I have a fair bit of work to do before I can make it available.

I'm not sure how you determined that it depends on jquery if none of it's available. All I could find on his site were PNG images ... no real demonstration of canvassing in HTML5.

Re:It has external dependancies

[gravyface]

have you looked at the source? All the white space has been removed; it needs to be reformatted.

As it stands now, the TFA might've just wrote:

$(".notation").css('background-image','url(/img/screw-you-slashdot.jpg)');

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

[Anonymous Coward]

I think he meant that the library has not external dependencies (and not the demo page).

The jquery dependency is only for the the document.onload handler, and not the actual rendering code. I took out the jquery script tag, and replaced $(...) with document.onload and everything still worked.

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

[jisatsusha]

Read the summary, there's a link to the demo - http://0xfe.muthanna.com/jsnotation/demo.html

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

[maxwell demon]

It's buggy.
Enter

#define foo\
        bar

(which is equivalent to #define foo bar)
and it will be "beautified" to

#define foo\
bar

(which is equivalent to #define foobar)

Re:It has external dependancies

[maxwell demon]

Oops, sorry, I noticed too late that it's for JavaScript ... forget that post.

Re:It has external dependancies

[tomhudson]

At 72k for the "minified" version, it's the wrong thing to do if it's not needed. The correct way to demo that a library has no external dependencies is to create a page without anything except that library and a document.onload handler to invoke the test case.

Saying "it doesn't have external dependencies" is not the same thing at all.

Re:It has external dependancies

[Abcd1234]

Someone apparently doesn't do any modern website construction...

This is the exact right thing to do if you plan to use JQuery. Yeah, sure, you could be an idiot and host it yourself (it's an OSS project, after all), but then you're wasting people's bandwidth because their browser has to retrieve your copy, rather than using the copy of Google's that they've cached while browsing websites being run by people who actually know what they're doing. Furthermore, it reduces load on your own server, as if the browser doesn't have Google's copy cached, it's Google's server that gets hit, not yours.

Re:It has external dependancies

[SanityInAnarchy]

I took out the jquery script tag, and replaced $(...) with document.onload

Not equivalent. $(...) tries to use the onDOMReady event -- you don't want to wait for all resources (images, etc) to be loaded before JavaScript works, do you?

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

[SanityInAnarchy]

This is the exact right thing to do if you plan to use JQuery. Yeah, sure, you could be an idiot and host it yourself (it's an OSS project, after all), but then you're wasting people's bandwidth

All 24k of it.

websites being run by people who actually know what they're doing.

That, or people who value the privacy of their users, and who would like to not have their website depend on Google being reachable, alive, and trustworthy. Sure, it probably will be, but can you say, "Single Point of Failure"?

Furthermore, it reduces load on your own server

Well, again, by 24k. Is that really worth it?

Now, I can see the appeal. I'm not saying you're automatically a moron for using this. But at the same time, don't assume that the only reason someone wouldn't use Google's APIs is because they don't know what they're doing.

Re:It has external dependancies

[Anonymous Coward]

You're confusing the demo with the actual library. jQuery is only used for the demo and not the rendering. Using jQuery is a good thing.

I replaced $(..) with document.onload and removed the jquery script tag and it worked just as well.

Re:It has external dependancies

[tomhudson]

Actually, even the minified version is 72k, not 24k, so it's even worse (I did a wget on that particular version to confirm the size - jquery.min.js 72,174 bytes). And of course the only way to verify that the minified version doesn't pull in more stuff is to look at the browser requests, since the source script is, for all practical purposes, semi-obfuscated.

If the "only" purpose was to run the script, a simple body.onload() would have done the job, as would calling the first function from an embedded script tag at the bottom of a demo page..

Re:It has external dependancies

[Anonymous Coward]

The right thing to do would be to retrive it from the official site. Not from a 3tr party that could modify it to suit his need without notice.

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

[Neon Aardvark]

Not equivalent. $(...) tries to use the onDOMReady event -- you don't want to wait for all resources (images, etc) to be loaded before JavaScript works, do you?

He didn't say it was equivalent.

He said it still worked. The whole point being that jquery is not in any way vital to the functioning of the original page.

Re:It has external dependancies

[WebCowboy]

Block google and see how well it works.

The developer is just using the Google mirror to load the jQuery AJAX framework library. jQuery is NOT a Google property--it is a widely used Free software library that is available everywhere.

The google hosted mirror is often referenced to reduce the bandwidth on servers that are struggling to handle volume (it is probably keeping the demo site from succumbing to a slashdotting). If you don't want an "external dependency" then just download jquery.min.js file from the jquery.org website onto your own server, then change the URL to reference your own copy.

Production sites use the "MINified" version of the library to save bandwidth. If you want to see the inner workings you can because it is open source--the non-MINified version of full source is at jquery.org as well.

jQuery itself doesn't provide music notation--it is a general-purpose AJAX library probably being used to provide an easy/concise way to traverse the DOM and/or handle page events (since plain old javascript can sometimes be tedious to use). Please follow the advice of the post and REALLY read the source! The "dirty work" of rendering the notes is done by the code in "vexnotation.js". That file doesn't seem to indicate that the musical notation rendering itself depends on jquery in any way. It wouldn't take much effort to remove the jquery dependency from the demo from what I can tell.

Re:It has external dependancies

[tomhudson]

If he's using jQuery to traverse the dom, then that's a dependency. My point stands - why not post a demo page that doesn't use it instead,if it's not needed? It's not like it's hard to write code to manipulate the dom.

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

[SanityInAnarchy]

The whole point being that jquery is not in any way vital to the functioning of the original page.

What he hasn't demonstrated is whether jQuery enhances the functioning of the original page. As far as I can tell, it does, certainly over his suggestion.

And certainly, jQuery is not necessary -- you could do everything yourself. That's the nature of a library.

Re:It has external dependancies

[larry bagina]

And if you gzip that 72k file (just like apache will) you get a 24k file.

Re:It has external dependancies

[thetoadwarrior]

Jquery rather you get it from Google because Google can afford it more than them and if everyone linked to the Google version then you would only have to download it once which improves speed because you have it downloaded once for numerous sites.

Sure it creates a single failure point for many sites and if you don't like that then, when you use it (if you use it) host it yourself. Your user won't get any benefit but if it makes you feel better then do it.

Re:It has external dependancies

[tomhudson]

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

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

I got it from the actual url on the page in question. Beter ask the person who wrote the page, not me.

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.

Very naive statement there,especially since the url, if you read my original post, is NOT the one you reference. And also totally irrelevant to the original point - a PROPER demo to support the claim that there are no other dependencies would NOT make reference to any other scripts.

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

HTML != XHTML. Get over it, and stop making "fake" xml by putting backslashes inside single-element html tags. It's stupid.

Re:It has external dependancies

[tomhudson]

And if you gzip that 72k file (just like apache will) you get a 24k file.

Too bad the script in question is not being served by Apache. And when you telnet into port 80, you'll see it sends an annoying cookie in addition to the script itself. So your movements are being tracked by Big Brother. BTW - you shouldn't accept scripts from sites other than the original host.

Re:It has external dependancies

[tomhudson]

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

... to compensate for the bloatware that has become the average "do-everything+kitchen sink" javascript junk. Also, it's not just whitespace removal. Replacing long, easy-to-read variable names with generic smaller ones, etc.

Of course, it's not necessary if the person is hitting your site more than once, since they'll only download the script once and thereafter fetch it from their cache, so the benefits are slight at best.

Re:It has external dependancies

[tomhudson]

And google likes it because they set/update a tracking cookie that lasts for a year, and tracks you across as many sites as possible - note the path - ALL of google.com.

Cache-Control: private
Content-Type: text/html; charset=UTF-8
Set-Cookie: PREF=ID=6207a0364053eb29:TM=1273872230:LM=1273872230:S=0B39TiYzu4rpi5yN; expires=Sun, 13-May-2012 21:23:50 GMT; path=/; domain=.google.com
Date: Fri, 14 May 2010 21:23:50 GMT

... feel free to use that cookie - it's from a telnet session into their server, and as such is useless. Another telnet session on the same machine produces a new cookie, rather than updating the existing one, since the "existing one" isn't saved between telnet sessions :-)

The proper way would be for the site using the script to also serve up a copy of the script. Eventually, all cross-site scripts will have to be disallowed just as a matter of security and privacy.

Re:It has external dependancies

[SanityInAnarchy]

I got it from the actual url on the page in question. Beter ask the person who wrote the page, not me.

It's a content-encoding option. The file itself is transparently compressed if the client supports it. That means if you save it with wget, either wget will send an "accept-encoding" header and decompress it silently for you, or it won't send that header and it'll get the uncompressed version.

Here, try it yourself. It comes out to about 24k, when supported.

Very naive statement there,especially since the url, if you read my original post, is NOT the one you reference.

First, you don't give a URL in your original post.

Second, how is it naive? Watch this:

$ curl -s http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js | md5sum
10092eee563dec2dca82b77d2cf5a1ae -
$ curl -s http://code.jquery.com/jquery-1.4.2.min.js | md5sum
10092eee563dec2dca82b77d2cf5a1ae -

Well, surprise surprise, they match perfectly, unless you're seriously going to claim Google is exploiting an MD5 collision -- not impossible, but seems absurdly unlikely. Again, how is it naive to assume that when I ask Google's API for jQuery 1.4, I get jQuery 1.4?

And also totally irrelevant to the original point - a PROPER demo to support the claim that there are no other dependencies would NOT make reference to any other scripts.

Oh, I see. There was that claim. Fair enough.

Of course, as others have pointed out, it's not terribly difficult to remove that dependency, as it seems to only be using it for the load.

HTML != XHTML. Get over it, and stop making "fake" xml

Erm, no, that's real XML. Making it XML enables much easier access to microformats, among other things, and generally easier access from REST clients. It also means that, so long as the document actually is XML, the browser can use an XML parser instead of a raw HTML parser -- and XML parsers are much smaller and faster than HTML parsers.

Putting script tags anywhere else in the document is generally considered bad form because of the existence of document.write. The fact that it exists, even if you don't use it, means that the HTML parser has to completely stop and evaluate the script before it can continue parsing the rest of the document. It's in the head for the same reason you want to put the Content-Type meta tag near the top of the document -- as soon as your browser sees that Content-Type, it has to throw away any parsing its done and re-parse the entire document using the new encoding.

In other words, it's not just a matter of people whining about standards, it's a matter of making the best, fastest pages you can.

It's also not like you have to type more in order to do that -- that's what Haml is for.

Re:It has external dependancies

[Simetrical]

This is the exact right thing to do if you plan to use JQuery. Yeah, sure, you could be an idiot and host it yourself (it's an OSS project, after all), but then you're wasting people's bandwidth

All 24k of it.

The bytes aren't the problem. A script load will block page rendering until the script is fully downloaded and executed. Slightly older browsers won't even fetch scripts in parallel with anything else: they just totally stop parsing the page when they hit a script, so they don't even notice later resources until they've run the script. If you're lucky, 24 KB will fit in one TCP window and you'll only have to do what, two or three round-trips? That's potentially quite a few extra ms you're adding to every page load.

Of course, caches are horribly ineffective on the modern web, since browsers tend to allocate 50 MB or something and that gets churned up almost immediately. So I doubt caching will actually help you much here. But don't sneeze at the cost of an extra script load – it's significant.

Re:It has external dependancies

[Simetrical]

I'm pretty sure the only XHTML-compliant place to put script tags is inside the <head> tag

You're mistaken. HTML5 permits scripts "Where phrasing content is expected", and phrasing content is the stuff that goes in regular old paragraphs and so forth. HTML 4.01 (thus also XHTML 1.0) also says scripts "may appear any number of times in the HEAD or BODY of an HTML document."

In fact, it's a good idea to put scripts in the body if possible, ideally at the end of the page. That way they won't block page rendering. "Put Scripts at the Bottom" is Rule 6 of High Performance Web Sites, an O'Reilly book that's worth reading if you're interested in the subject.

Re:It has external dependancies

[SanityInAnarchy]

Of course, caches are horribly ineffective on the modern web, since browsers tend to allocate 50 MB or something and that gets churned up almost immediately.

Which is why I try to give the browser more on the order of a gig or two. Unfortunately, Chrome doesn't seem to let me change that...

Re:It has external dependancies

[tomhudson]

I already know that it's part of the content-negotiation handling scheme. I've been doing this for a long time. I've had to write c code to do this sort of crap.

Next, you make a claim that is simply untrue:

First, you don't give a URL in your original post.

Here's the original post http://slashdot.org/comments.pl?sid=1651994&cid=32205748

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>

That's my original post. That's a URL sitting in there.

Try clicking on "parent" a few times, or, you know, reading the thread?

Putting javascript after the body is perfectly valid, and speeds up the loading of the page. Yes, "The fact that it exists, even if you don't use it, means that the HTML parser has to completely stop and evaluate the script before it can continue parsing the rest of the document" - but guess what - if the document is already loaded, that's pretty much moot. Putting an onload handler after the body is valid, and faster to the end user, since the page is already rendered. Just don't put a call to "document.write" - manipulate the dom instead. The document is already, at that point, fully rendered.

And "xml-ifying" html is purely an affectation, when it's meant to be viewed as a web page. A waste of space, time, and clock ticks.

Re:It has external dependancies

[tomhudson]

So why not email the guy and show him how to make his demo conform to his claims?

Re:It has external dependancies

[SanityInAnarchy]

Most of your points are valid, and I apologize for missing the original, original post. (I didn't go far enough up the thread.)

I'm actually going to have to go think about how script loading works.

But this part:

And "xml-ifying" html is purely an affectation, when it's meant to be viewed as a web page.

Nope, you seem to have ignored the microformats link and the potential for building a web service, not just a web page. HTML is rich enough to be used as a generic hypertext language -- no need for JSON or separate XML for your AJAX -- but it's a lot easier for bots to consume when it's XML.

And if you're complaining about this part:

A waste of space, time, and clock ticks.

A waste of space -- yeah, I think I can afford the occasional character or two. Really?

Time doesn't apply -- I linked to Haml, and there are other, similar tools. I actually spend less time generating perfectly valid XHTML than I would generating poorly-formed HTML, even when you consider that both cases are effectively hand-coding.

Clock ticks are actually the inverse. Again, an XHTML document can be parsed with an XML parser, which is much simpler than an HTML parser -- thus, fewer clock ticks, even if it's just being viewed as a web page.

Re:It has external dependancies

[tomhudson]

I've had to parse xml in c - I've seen what generic parser code is like, and it's both ugly and time+space-consuming. Eve replacing it with use-case-specific code isn't that great an option, because of problems inherent with xml as a format - it sucks.

The easiest? SDF. Second-easiest, delimited - whether it's with with tabs, spaces, fixed fields, colons, or whatever. Both are quick and easy, don't suffer from memory bloat, and also easy to detect and recover from errors in formatting, dropped data, etc. SDF also has the advantage of being blazingly fast for searching for/rewriting/updating a specific record by number - a major failing of xml. Also, indexing SDF is quick and easy. XML? Nope. Remember all the fuss about "binary xml"?

Re:It has external dependancies

[SanityInAnarchy]

I've had to parse xml in c - I've seen what generic parser code is like, and it's both ugly and time+space-consuming.

Still not nearly as much as HTML. Also, much better specified, and many existing implementations in every conceivable language.

I don't recall claiming that it was easy, but you were the one who raised the issue of clock ticks. Have you had to parse generic HTML in C?

Re:It has external dependancies

[Anonymous Coward]

Aren't you the one making the claim?

You said "it has external dependencies" when it clearly doesn't. Why persist in arguing?

Re:It has external dependancies

[tomhudson]

You might want to quit while you're behind. XML is the worst thing to come down the pike, it is bloated, and software to manipulate it in every language suffers performance problems, It's just one big fuck-up. Like the java class structure.

Re:It has external dependancies

[SanityInAnarchy]

And yet, you haven't refuted my point. Are you actually going to tell me that XML is worse than HTML?

Re:It has external dependancies

[tomhudson]

Xml> is garbage.

XML is not a markup language

XML is not a markup language
XML does not deserver its "ML", or even its "X". But first, the "ML" part.

I am one of the world's leading experts on markup languages. I'll start there. I'm a 20-year veteran of desktop publishing, am personally related to the author of one of the very first markup languages in the world (Scribe), and have actually used SGML, MML, HTML, and most of the other markup languages that came along decades before XML.

So I know what I'm talking about. XML is not a markup language.

A markup language is predicated on the idea that the markup is an exception in a river of text. That is, the markup is a departure from the state that existed at the time the markup was encountered.

One of the first instances of this was the TROFF mechanism in UNIX, used for formatting "man pages". A simple example was that a line that started with .i was italic. So you might format a sentence with an italic word in it like this:

Here is an
.i emphasized phrase
and back to normal text

The same basic approach is used in HTML, except that it's not line-oriented, so you need a "close delimiter" other than carriage return (which is actually a pretty handy closing delimiter, but I digress). So the same thing in HTML is:

Here is an <i>emphasized phrase</i> and back to normal text.

The idea of markup is that you literally mark up a text, "circling" things, if you will, giving instructions to the typesetter (or parser, or other) that this snippet of text is to be treated somehow differently.

Another tenet of a markup language is that only the syntax is specified. The semantics of what the markup means is implicit (HTML) or described earlier (Scribe) or some combination of the two (CSS).

But here's the real kicker: a pure ASCII text file is a valid example of any markup language. That underscores the notion that the markup is a departure from the river of text. So a plain text file is technically a valid HTML file (though they ruined that purity with XHTML and CSS by requiring tags in it, but that's because they too didn't really know what a markup language was).

and http://xmlsucks.blogspot.com/2006/12/xml-as-container.html

Monday, December 11, 2006
XML as a "container"
XML is most often used as a kind of container to hold structured data of some kind. The semantic nature of the data is not defined by XML itself, but typically is carried separately as a data definition or simply by being programmed into the model itself, which is the more common approach (e.g. "this XML file contains preference data" or "this XML file contains a Technorati Ping").

There is one big problem with XML as a container. Its syntax, which is borrowed from HTML and SGML, involves angle brackets and a begin/end paradigm. The problem with this is that you can't embed similar data inside the XML file without escaping all the angle brackets. That gets messy very fast. It also is impossible to nest to arbitrary depth. That is, you can't have an XML file that contains an XML file that contains an HTML file without knowing beforehand how many times to un-escape the data when parsing it.

It also makes it essentially impossible to embed binary data in an XML file because you can't know whether or not to escape the XML sequences within the binary data (you should NOT, if the binary data is to be respected).

This is a classic problem with file formats which require parsing of the data and in which the delimiters themselves might be embedded. You have to recognize nested delimiters and/or escape them.

There ar

Re:It has external dependancies

[SanityInAnarchy]

If we were able to "reboot" the internet, xml wouldn't exist.

In that sense, it seems a bit like C. If we were to "reboot" the software world, C wouldn't exist, and we'd (hopefully) have something better in its place.

But if you're going to replace it, have something better to replace it with.

Let's dissect this:

I am one of the world's leading experts on markup languages. I'll start there. I'm a 20-year veteran of desktop publishing...

I'm big and important. Sounds familiar, actually. Here's what Jerry Taylor had to say about himself:

I am computer literate! I have 22 years in computer systems engineering and operation.

Years of experience doesn't automatically make you an expert, as Mr. Taylor's record shows.

A markup language is predicated on the idea that the markup is an exception in a river of text. That is, the markup is a departure from the state that existed at the time the markup was encountered.

What about XML prevents it from being used in exactly that way?

Another tenet of a markup language is that only the syntax is specified. The semantics of what the markup means is implicit (HTML) or described earlier (Scribe) or some combination of the two (CSS).

Given this, what is problematic about a generic markup language?

a pure ASCII text file is a valid example of any markup language.

Bullshit, and HTML is the perfect example. Even if you ignore all the stuff the standards ask you to add -- even HTML4 wants a DOCTYPE at the top -- anywhere I want to use the < character, I have to escape it. This is true of any markup. (Plain text really doesn't count as a "markup language" in its own right, as it provides no means of, oh, marking things up.)

So this "expert" is factually wrong -- or at best, exaggerating on one of his main points. The blog itself is hardly unbiased. On to the next:

XML is most often used as a kind of container to hold structured data of some kind.

In this case, I would agree that there are much better choices. Depending on the data, I might use JSON, Yaml, or separate out the binary bits into a separate file, or a custom format if I actually need vertical performance.

There is one big problem with XML as a container. Its syntax, which is borrowed from HTML and SGML, involves angle brackets and a begin/end paradigm. The problem with this is that you can't embed similar data inside the XML file without escaping all the angle brackets.

That's true of using any markup language to hold structured data, including embedding source code in a string in source code. So what?

It also makes it essentially impossible to embed binary data in an XML file because you can't know whether or not to escape the XML sequences within the binary data (you should NOT, if the binary data is to be respected).

What? No, you should, so that the binary data will be extracted as a raw string. That said, I don't think XML was ever designed to handle binary data -- the only ways it currently does is as a Base64-encoded string.

This is why, for instance, both OOXML and OpenDocument are apparently stored as a zipfile containing several XML documents and several binary files, where the binary files represent images. This makes sense, and it's more or less the same structure as HTML.

There are many other approaches to file formats which might have been better choices. For example, instead of a begin/end paradigm, specifying type and length data allows unambiguous parsing.

It also sacrifices the ability of humans to edit and debug the data with a text editor, as the article says:

It is not, however, easy to comp

The Rush to HTML 5

[silverbax]

I can almost hear the thundering footsteps of developers rushing to HTML 5. I have to admit, I'm one of them.

Re:The Rush to HTML 5

[Thanshin]

I can almost hear the thundering footsteps of developers rushing to HTML 5. I have to admit, I'm one of them.

HTML5 Music Notation
Version 0.1 by 0xfe

Test 1
HTML5 Canvas not supported on this browser.
Test 2
HTML5 Canvas not supported on this browser.
Test 3
HTML5 Canvas not supported on this browser.
Generated completely with JavaScript using the HTML5 "Canvas" tag.

Obviously, I'm at work.

Re:The Rush to HTML 5

[tepples]

I'm at work and I can see canvas just fine. But maybe that's because my employer intentionally uses a mixture of Chrome, Firefox, and IE, so that office staff can more quickly find and report browser compatibility problems that might also affect the public side of our web site.

Re:The Rush to HTML 5

[Anonymous Coward]

Not Microsoft. MS is still trying to find how to make internet MS-only. But they can not directly say no to HTML5, it would be too obvious. As with OOXML and Office, or delivering documents for their interfaces as EU ruled, they are trying to make us believe they support openness. They will not use OOXML to procude documents that other software could use, they are not delivering usable documents for interfaces. So why would they support open standards for web? MS has only to lose with openness and is the only one who has.
Everybody else would (will) win.

Re:The Rush to HTML 5

[Temujin_12]

I can almost hear the thundering footsteps of developers rushing to HTML 5. I have to admit, I'm one of them.

And I can see most of them sheepishly dragging their feet back to HTML 4 when they realize that IE's implementation of HTML 5 sucks.

Re:The Rush to HTML 5

[Anonymous Coward]

Please tell your employer that he has a clue, and that he's one of the few who does.

Re:The Rush to HTML 5

[Hurricane78]

MOOO TOOT! ... uuum, I meant MEE TOO! :P

(Although I go with the professional variant: XHTML5. And only if Haskell and a real app cant’t do it. ^^)

Re:The Rush to HTML 5

[ClosedSource]

If you want to be the last guy standing after layoffs you should tell your employer that he has a clue even if he mandates IE6.

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

[imamac]

Yeah, me too in IE 7. But, that's still a bit old. I'd love to see this, but I guess I'll have to wait until I get home. If it's as good as the summary makes it sound, Coda Music may have a need to be concerned.

Copyright Infringement

[turgid]

Surely this is just a tool for the copyright infringement of the RIAA's music?

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.

Re:Copyright Infringement

[Anonymous Coward]

Unless the score is derived by ear from one of the song's that a RIAA member owns the copyright of (derivative work). Even better would be if the site gained the ability to synthesise a MIDI or used the audio tag and JS to play it in the background.

Re:Copyright Infringement

[turgid]

Yes, but, if you listen to a recording you can transcribe it. People already provide home-made guitar tabs for commercial recordings... The RIAA and their foreign counterparts weren't very impressed.

This should result in an interesting, if not amusing, fight as the recording industry tries to tighten its grip even further.

Re:Copyright Infringement

[fustakrakich]

entirely separate organizations.

So are the army and the navy, but they work under the same umbrella, and work to protect a common monopolistic goal.

Re:Copyright Infringement

[CRCulver]

Only sometimes. At least in the contemporary art music world, I've talked to employees of some publishers' who are happy that recordings are so widely shared now, since the more of a fanbase their composers have, the more they get programmed at concerts and thus make the publisher money.

Re:Copyright Infringement

[Anonymous Coward]

Yes, but, if you listen to a recording you can transcribe it. People already provide home-made guitar tabs for commercial recordings... The RIAA and their foreign counterparts weren't very impressed.

Do you have anything to actually back this up? The only people I've ever heard getting upset about tabs and notation are the publishing associations (ASCAP, BMI, etc). This is precisely the point that the GP post was making. The publishers are not the RIAA, but don't let that little fact get in the way of your seething hatred.

Re:Copyright Infringement

[turgid]

OK, so I was using "RIAA" as a catch-all for the entertainment publishing industry. They're all in it together and as bad as each other.

I don't feel seething hatred for them as much as dismay and pity these days. They are bound to fail embarrassingly soon enough.

Re:Copyright Infringement

[DNS-and-BIND]

That would be ASCAP. Almost as equally evil. They had a stultifying effect on country music for a long time, don't know about other genres.

Re:Copyright Infringement

[Rary]

That would be ASCAP. Almost as equally evil. They had a stultifying effect on country music for a long time, don't know about other genres.

ASCAP is a Performing Rights Organization. What you're looking for is a publisher, and often those fall under the same umbrella as the record label, so ultimately it comes back to the RIAA again.

Re:Copyright Infringement

[robkill]

The agency in question is Harry Fox Agency. They represent the majority of music publishers, and were responsible for bringing down the Online Guitar Archive (OLGA) back in the 90's for publishing infringement for posting tablature.

http://itlaw.wikia.com/wiki/Harry_Fox_Agency

Re:Copyright Infringement

[drinkypoo]

That would be ASCAP. Almost as equally evil. They had a stultifying effect on country music for a long time, don't know about other genres.

I wrote a song about it, but my dog ran off in my pickup truck with my wife, and now I'm crying tears into my beer because the song was in the glove box.

Re:Copyright Infringement

[jimthehorsegod]

No, they deal with lawsuits>

Re:Copyright Infringement

[jdgeorge]

Accidentally modded this comment incorrectly; posting to undo that.

Good discussion here, in any case.

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

[VitaminB52]

Yep. In IE9.

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

[Anonymous Coward]

In IE9, which will have some useful amount of market share by 2016 or so.

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

[Anonymous Coward]

Excuse me?

Firefox could only dream of having as much market share as IE

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.

[Anonymous Coward]

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

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.

Re:Good job. Need more.

[Anonymous Coward]

Indeed. It can become problematic if you have double-sharps and double-flats. They are already squished as is.

Re:Good job. Need more.

[digsbo]

It might be worth applying the LilyPond adjustment algorithms in his framework. Their stuff looks decent enough to be usable.

Re:Good job. Need more.

[Corf]

As opposed to half the other posts on Slashdot, which read as "I know some basic things about computers and need others to know that I do"? :P

Re:Good job. Need more.

[u38cg]

Getting computer generated scores to the same level of clarity and readability is an extraordinarily hard craft - things like the size of objects is just the tip of the iceberg. There's a reason that manual music engravers used to train for years before they produced work that was commercially produced.

Does'nt work in Firefix 3.6.3

[Gresyth]

The point of a DEMO is to show your tool in action. Sound, notes appearing magically, not just static screen shots.

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:Does'nt work in Firefix 3.6.3

[Anonymous Coward]

lol

Re:Does'nt work in Firefix 3.6.3

[perryizgr8]

lol. you thought you would hear music??

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

[anilg]

I hate all these whitespace-removed code files.
To see it cleanly.. use
http://www.howtocreate.co.uk/tutorials/jsexamples/JSTidy.html

Re:Only relevant

[SavedLinuXgeeK]

The source is not for you to read, but for bandwidth to be saved. You'd probably hate it more if the page took a lot longer to load as well.

Re:Only relevant

[Civil_Disobedient]

That's how JavaScript library developers get away with describing something as "ONLY 75K TO DOWNLOAD!" They strip out the whitespace (and occasionally use gzip). Makes debugging a royal PITA, to say nothing of the disingenuousness of the claim.

Re:Only relevant

[batkiwi]

Every library I've used has a "debug" version (nice names, nice spacing, etc) and a "production/tiny" version (optimized for end user browser download/caching).

Re:Only relevant

[Amouth]

Most do.. when they are replaced - this is just a proof of concept and not an actual hey here use this release.

Re:Only relevant

[maxume]

Stripping the whitespace saves about 20 kB over the output of jsbeautifier. Gzipping the expanded version saves more than 35 kB over the whitespace-free version (and loses 1 kB to the gzipped whitespace-free version).

So hopefully they are spending more time on the gzipping part.

(jsbeautifier: http://jsbeautifier.org/ )

Re:Only relevant

[flanders123]

Pfft. 57KB Javascript? Shoulda just made a couple pngs. :-)

In all seriousness though, wouldn't it be more efficient to dynamically render the image server side, serve up that image, and cache it for future requests?

...I clearly am missing the point of this demo, so be gentle.

Re:Only relevant

[acidrainx]

They do more than just strip out the whitespace. JavaScript minifiers will also rename function scoped variables into shorter versions (i.e. a, b, c, etc). The Google Closure Compiler will even do some code rewriting optimizations:

The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what's left so that it downloads and runs quickly. It also also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain. You can use the compiler with Closure Inspector, a Firebug extension that makes debugging the obfuscated code almost as easy as debugging the human-readable source.

As someone has already said, all JavaScript libraries are usually distributed with the original unminified source, so not being able to debug it is your fault alone.

Re:Only relevant

[Anonymous Coward]

Do you hate compiled code too?

Rickroll

[kiehlster]

And here I was hoping they'd do the obvious and give us beautifully rendered Rickroll tabulars.

Re:Not Sure if You Can Call That a Demo

[maxume]

Are the png's you are talking about somewhere in here:

http://0xfe.muthanna.com/jsnotation/vexnotation.js

Or are they somewhere else?

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:Not Sure if You Can Call That a Demo

[Anonymous Coward]

Except for the fact that the tablature is wrong and doesn't represent the notes in the treble clef, above. NOBODY would fake that.

Could be very helpful, but not yet

[Anonymous Coward]

I would be impressed if I could click on notes and hear the sound, push the "play" button and have the whole thing played or select a piece and play it. With javascript it should be easy. With pictures it's impossible.

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

[Svippy]

It's IE9. And it won't support it either. Microsoft is only pushing for HTML5 without the Canvas tag. It might be too difficult to program, I guess.

Hey, here's an idea, Microsoft, use Webkit instead!

Re:Not Sure if You Can Call That a Demo

[eldavojohn]

Are the png's you are talking about somewhere in here:

http://0xfe.muthanna.com/jsnotation/vexnotation.js

Or are they somewhere else?

You are entirely correct on the demo, I withdraw my comments and apologize for my obvious mistake. I was only inspecting the blog post with snippets as PNGs. My mistake, please mod my original post down.

Odd that he says:

I have a fair bit of work to do before I can make it available.

Surely he realizes that he's made it available as you note?

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

[Svippy]

Excuse me?

Firefox could only dream of having as much market share as IE

Dream? It's not that much a fevered dream any longer, it is closing in on reality, ever since 2007, IE's market share has only gone one way. And with Chrome and Safari in the mix as well, IE's market share won't go up any time soon.

Re:Not Sure if You Can Call That a Demo

[K. S. Kyosuke]

"I saw this a few days ago and was impressed ... until I tried to look inside. The demo is just a bunch of PNGs."

Are you sure you are talking about this web page? Because there is no PNG image inside, only three HTML5 canvases.

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

[Anonymous Coward]

Microsoft is only pushing for HTML5 without the Canvas tag.

blatant FUD. microsoft's own IE9 HTLM5 demo with the stupid spinning logos uses the canvas tag. maybe you're confusing their decision to only support h.264 for video, or you're just a troll.

Re:Not Sure if You Can Call That a Demo

[maxume]

Presumably "making it available" includes more than posting the jammed up code to the demo site.

Re:I'm afraid...

[K. S. Kyosuke]

...this doesn't work in my browser (firefox 3.5)

keep this crap to yourself until its ready for primetime - you're wasting peoples time.

Hey, Firefox 3.5 may be a not-ready-for-prime-time crap browser as far as HTML5 is concerned, but otherwise it's a fine browser. ;)

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

[u38cg]

And where's your Javascript typesetter? Yes, music typesetting is a fine art, and there is scope for improvement, but anyone doing the work to actually make this happens deserves a little bit more than pedantic abuse, don't you think? Sheesh.

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:I'm afraid...

[bcmm]

Works in Konqueror with WebKit.

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

[Anonymous Coward]

Firefox could only dream of having as much market share as IE

In socialist Germany Firefox dreams you:
http://gs.statcounter.com/#browser-DE-weekly-200901-200952

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

[Anonymous Coward]

LoadGoogle Chrome. You can see where MS will be in months from now.

Same in Google Chrome

[schon]

I get the same in Chrome 5.0.375.29 beta.

I *know* Google Chrome supports HTML5 and <canvas>, so I'd say his page is broken.

Re:Same in Google Chrome

[middlemen]

I get the same in Chrome 5.0.375.29 beta.

I *know* Google Chrome supports HTML5 and <canvas>, so I'd say his page is broken.

Works in Safari properly. Your Chrome beta is exactly that, a "beta".

Re:Same in Google Chrome

[WindBourne]

5.0.342.9 beta/Linux shows it perfectly (and it really is nice).

Re:Same in Google Chrome

[IceFreak2000]

Google Chrome 5.0.375.38 beta seems to render the demonstration page perfectly on my system (Windows 7 x64)

Re:Same in Google Chrome

[somersault]

Exactly the same version of the beta here and it's working fine (on Ubuntu 10.04).

Re:Same in Google Chrome

[Dishevel]

I am using 5.0.375.38 beta and it works great for me.

Re:Same in Google Chrome

[sortius_nod]

Works fine in stable... I actually rolled back from 5.x recently due to problems with gmail (dev version, beta wasn't much better).

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.

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

[Anonymous Coward]

As of today, the IE 9 preview doesn't support the canvas HTML 5 component - at least that is what the site says when you try it in the IE 9 preview 2. (it actually ends up loading in IE 5 compat mode due to code on the site, but if you force IE 9 mode the site still says canvas isn't supported. This could be the site's code though, I certainly don't know enough about it to tell).

Re:Not Sure if You Can Call That a Demo

[je ne sais quoi]

He says he wants an editor before he can release. From the followup post, he says he's going to use ABC notation to actually post scores but leave designing the front end to someone else. Just out of curiosity, I looked at what he's using now, here is the notation to generate the score for the first demo. The first part is just drawing the bars:

VexNotationDemo1(b){b=new Vex.Music.Artist(b,{scale:0.9,width:900});var c=b.CreateScore(),d=b.CreateScore();b.DrawScore(c);var e=GetBar1(b,c);b.DrawBar(e);e=GetBar2(b,c);b.DrawBar(e);e=GetBar3(b,c);b.DrawBar(e);e=GetBar4(b,c);b.DrawBar(e);c=GetBar5(b,c);b.DrawBar(c);b.DrawScore(d);c=b.CreateContinuingBarFrom(c,d);b.DrawBar(c);d=GetBar7(b,d);b.DrawBar(d)}

Here's where he adds the notes and their duration:

function GetBar4_2(b,c){c=b.CreateBar(c);var d=c.AddLine();d.AddNote(b.CreateNote({keys:["f##/4"],duration:"h"}));var e=[];e.push(b.CreateNote({keys:["a##/4"],duration:"16"}));e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));e.push(b.CreateNote({keys:["f#/4","a/4","f/5"],duration:"16"}));e.push(b.CreateNote({keys:["f#/4","a/4","f/5"],duration:"16"}));d.AddNotes(e);e=b.CreateBeam(e);d.AddBeam(e);
e=b.CreateNote({keys:["db/4"],duration:"32"});var f=b.CreateNote({keys:["f#/4"],duration:"32"}),g=b.CreateNote({keys:["db/4"],duration:"32"}),h=b.CreateNote({keys:["f#/4"],duration:"32"});d.AddNote(e);d.AddNote(f);d.AddNote(g);d.AddNote(h);b=b.CreateBeam([e,f,g,h]);d.AddBeam(b);return c}

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

[Anonymous Coward]

Where did you read IE9 supports Canvas?

http://www.canvasdemos.com/2010/05/06/ie9-preview-2-doesnt-support-canvas/ [canvasdemos.com]

Without IE supporting it, what's the use in all of these Canvas demos?

mod parent up!

[Anonymous Coward]

Tom Hudson doesn't know what he's talking about. JQuery is just used to render the notation on load; if you look at the code for the library, there's no JQuery dependencies (you have to run it through jsbeautifier.org first).

Come on man, at least do a minimal amount of research before you post. Oh, wait. Slashdot.

Re:mod parent up!

[tomhudson]

JQuery is just used to render the notation on load

... and the proper way to do it to prove that there are no external dependancies would be to create a page that has ONLY the library in question, and a document.onload handler that ONLY calls the library in question.

Re:mod parent up!

[Anonymous Coward]

Ok, Tom? You're not even a little bit right here.

What you said was either out of total ignorance of the matter or deliberate misunderstanding of what the guy said. When it's pointed out to you, you dig in your heels and refuse to acknowledge that you were completely wrong.

Show a touch of intellectual honesty and a bit of humility, man - admit you were wrong.

Re:mod parent up!

[tomhudson]

Oh, look - the apk troll is alive and still unwell. Must have just finished his shift at Mcdonalds. Why not tell us again how you "only get 2 viruses a month by using a custom hosts file on your 400 hz computer".

Re:mod parent up!

[Anonymous Coward]

I'm not the anonymous poster above and I'm not apk and THE HOSTS FILE WORKS. MY GIRLFRIEND ONLY GETS 2 VIRUSES A MONTH USING THE APK HOSTS FILE, and she'd get even fewer if she followed all the directions in the security guide.

Re:mod parent up!

[Anonymous Coward]

Who cares if the call is wrapped by another execution context? You have to run it in a browser, which itself wraps dozens of execution contexts. This is like whining that loading the page requires win32. It doesn't. It only happens to use win32, if you use Windows/IE6 or whatever.

The library has no external dependencies. The calls to the library were merely wrapped by a simple calling combinator. JQuery is not used in the library, nor is JQuery used to modify values in the library.

Re:mod parent up!

[tomhudson]

Then why not make a REAL demo page that has ONLY the library as a dependency? If you're going to make a claim, and offer proof, don't you think your proof should, you know, prove it?

To make a bad car analogy, this is like someone saying they have a blue car, and showing a picture of red car as proof. Or that they will prove that they can drive a motorcycle by showing a video of themselves driving a car. Sure, we can dig deeper, or make a few assumptions, but we shouldn't have to. As proof, it's badly done.

Re:mod parent up!

[Anonymous Coward]

You're boring. Shut up already.

Re:mod parent up!

[poopdeville]

Let's turn your ridiculous car analogy around. Go to a car lot, and tell them you want to buy a red Totoya Prius. Ask them for a test drive. Guess what: they have Priuses on the lot for you to drive. AND IT MIGHT NOT BE RED.

Does it matter? No.

Re:mod parent up!

[soppsa]

Here here. Though in general one should always just ignore Tom Hudson's slashdot trolling. It got old years ago.

What are you all talking about?

[Anonymous Coward]

Unless there have been some breath-taking musical notation evolution, the letters "HTML5 Canvas not supported on this browser." are not considered musical notation. Have you all gone nuts?

Re:I'm afraid...

[V!NCENT]

Works perfectly here in Rekonq with WebKit too, but that should be no suprise ;)

No "real-time music editing" here.

[Anonymous Coward]

Just a rendering engine.

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

[Derek Pomery]

Those are the high values, even.
Average on Wikipedia is 53% for IE, w/ some major stat sites even lower, in the high 40s.

In the US, according to StatCounter, IE is at 53% on weekdays, 48% on weekends, and IE6 is at 6% on weekdays, 3% on weekends.

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

[beelsebob]

IE market share overall has been dropping by at least 1% per month for a few years.

There, fixed that for you.

Record labels and music publishers share parent co

[tepples]

[turgid confuses record labels and] music publishers, entirely separate organizations.

How separate? Warner Music Group owns both Warner Bros. Records and Warner/Chappell Music. Sony owns both Columbia Records and half of Sony/ATV Music Publishing.

ObXKCD

[tepples]

...never gonna let you down, never gonna run around and des-(beat)ert you

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?

[ommerson]

...if you call the ~1/3 of the javascript file initializing the description of the score a 'mark-up language'

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:A third music mark-up language?

[wolftone]

The learning curve for Lilypond is really no worse than for any other text-based music typesetting software -- and far easier than, say, the TeX music packages. ABC is a little more simple on the surface, but is so much less flexible as to make it useless for complicated music. MusicXML seems to be a good transport format, but as parent points out, it's clunky: like any other XML format, everything is perfectly readable and will take a year and a day to type.

Lilypond, which seems to me to be the best option for open-source notation software, is probably not a worthwhile system for creating on-the-fly snippets for web pages. Something JavaScript based would be nice for that, and it seems likely that there could be wiki plugins that could be used to create musical examples without huge dependencies (much less specific versions of any given large software packages), or a knowledge of how to use these large, complicated notation software packages. There might still be the problem of being limited to simple examples, but do we really need all of Lilypond and its dependencies to create an example of a Phrygian scale?

Incredible? Really?

[edremy]

Yes, this is a very nice start and working in academic tech I'm really interested in seeing this sort of stuff moving forwards.

But can we cool the HTML 5 hype engine, seriously? This is a very minimal demo, just like every other "Look at the amazing power of HTML 5!" site I see. There are Flash-based music sites out there with dynamic scrolling, multi-track MIDI playback and lots of other features, and nobody calls them incredible. I look at the moving dot demo and then go back to Prezi, or listen to all the stuff about video in HTML 5 and then go work in Kaltura for a while

HTML 5 has a lot of potential. But it's hardly some amazing thing that brings new capabilities to the web. All of this is possible now. You may not like how it's done, but all HTML 5 is going to do is change the underlying tech, not give us lightning.

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

[Anonymous Coward]

It is for all those people that use a real browser?

An important question:

[L4t3r4lu5]

Will asking it to render the Sax solo at the beginning of Baker Street cause it to crap out?

Music is not all western default notation,you know

[Hurricane78]

Looks like another limited system based on standard notational systems. Nowadays I prefer music automatons that create highly dynamic loops. Stuff that you can build in Reaktor, and that you control with lots of MIDI controllers and analog inputs (read: microphone, instruments). My music scores would look like those of Aphex Twin: http://navid.radiantempire.com/pub/pix/Lustiges/aphex_twin.jpg ^^

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

[Nadaka]

That just means that at least 5% of IE users and 50% of ie6 users would rather use something else to browse the web, but are forced to use IE due to the policies of their workplace.

Beautiful? Not really, No.

[benwiggy]

His Beaming is terrible; his augmentation dots are on the barline; his slurs are too thick; his accidentals too small. His note spacing sdoesn't look too hot either.

Donald Byrd, the leading exponent of notational algorithms, has shown that fully automated music notation is not possible without human-level artificial intelligence.

....still, I applaud his efforts as an early start.

Re:Beautiful? Not really, No.

[bendodge]

What are you talking about? The notes and modifiers are all preset. There's no AI here...

Re:Beautiful? Not really, No.

[benwiggy]

I'm saying that fully automated music typesetting will never be good enough WITHOUT AI. It is a well-known quote by Donald Byrd.

I'm therefore saying that this technology is not up to the job of displaying music notation properly.

"Incredible"? Really?

[Assmasher]

It's 2010. Why would we be finding something so simple 'incredible' - oh, wait, it's because people are trying to use the browser to do everything and it's a horrifically bad idea.

Look, I like HTML5, just as I like HTML4, but the web is a terrible programming environment. Javascript is great, but to listen to all the web 2.0/3.0/x.x proponents blather on incessently about how web applications are great and the way of the future and... blah blah blah. It's ridiculous.

If you want applications to run through your browser and you want them to look good, work well, and offer lots of features commonly found in 'offline' applications, great - lobby the W3C to come up with something - but using the mess that is HTML (of any flavor when used for applications) and Javascript in order to offer the abilities found on any PC since the early 80's is ridiculous.

Now, all that being said. Yes, it looks very nice and is a nice indicator of possibilities with HTML5 and the canvas element.

Music Notation?

[Yvan256]

I prefer the less-obfuscated method used by MOD/S3M/XM/etc editors/players, whatever it's called.

Re:"Incredible"? Really?

[slim]

the mess that is HTML

To be fair, the "HTML" is pretty much limited to one <canvas> element and one <script> element.

The only remaining cruft is Javascript, which readers of Crockford et al. know *can* be used to produce beautiful well structured code.

It shouldn't be a surprise that the well-specified Canvas element allows people to do this kind of thing.

But why not celebrate when it happens? I'm happy that music notation can be displayed in a browser in a better way than transmitting large bitmaps.

Lilypond *

[Anonymous Coward]

Neat, but as a Lilypond http://lilypond.org/ user, I doubt it'll match my expectations. Nor will I want to retype out all my codes in an inferior format.

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

[Anonymous Coward]

Correction: 9.4% of IE users, not 5%

I prefer bars myself.

[elucido]

If they make it so that visual notation is an option for composers like myself, I will use the site.

http://www.youtube.com/watch?v=ipzR9bhei_o

The author should know that not ever musician has classical training. In fact the vast majority of us cannot afford to go to music school and pay for classical training. Giving the option to allow us to import any visual composing mechanism we want into the product would be ideal.

Music typesetting isn't as easy as it looks

[ommerson]

I currently work in the field of computer music typesetting, and can vouch for the fact that it is a hard problem - one that is considered not to amenable to being universally automated by computer.

Achieving a rendering of very simple scores such as these is easy, but coping with anything more complex starts becoming a difficult data structures and algorithms problem really quickly, and the layout rule-set becomes increasingly complex in order to handle the myriad corner cases.

What we see here is a great start, it demonstrates that it's possible to render music symbols in HTML canvas, but it's very far from being a complete music typesetting solution that can take an arbitrary description of a score and produces rendered output, which is the impression conveyed to many of those commenting here.

The data model of the score in the example is generated programmatically (it takes up about 1/3 of the javascript file) and is fairly simplistic. This is an important consideration as the only sane way to create and edit scores is with a graphic editor of some kind, such as Sibelius, Finale, Notion or a bunch of open source alternatives.

Increasingly the de-facto interchange format for these is MusicXML, however MusicXML is largely a semantically oriented description of the score with optional positional data rather than a presentation-oriented one. Indeed, if a presentation oriented description is what you required, you might as well use SVG to start with.

Generally the approach one would take would be to convert the MusicXML data model into a presentation oriented one, applying layout rules as you go.

The small amount of layout logic here is very simplistic. Things become much more difficult when multi-stave scores, paging, line-breaking and justification, slurs and so on. I'd would also suggest that whilst implementing the complex algorithms and data structures required in Javascript is certainly within the bound of possibility, it would not be easy, and wouldn't be my first choice of implementation technology.

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

[slim]

Interesting post. A couple of questions:

  - 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've been using the OSS "MuseScore" editor, and I'm perfectly happy with the layout (less so about usability).
- Javascript is not your first choice. What language would be? I suspect, for the layout part, functional programming would be perfect -- for a programmer who's grokked FP. JS can be used in a purely FP manner, if the programmer chooses.

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

[benwiggy]

Ms Word does typesetting? Ha Ha Ha.

This is one of the problems with the freedoms that the computer revolution has given us. Anyone can design a book, or notate a page of music -- but can they do it WELL? Technology is sadly, no substitute for talent.

Music engraving -- on sheets of metal by hand -- had a 9 year apprenticeship. It has been proved that Music notation cannot be represented automatically by algorithms. Most notation programs still require a knowledgeable eye to adjust elements by hand.

Hot metal typesetting has similarly all sorts of rules, many of which are commonly not applied. However, when you see a page that has been designed according the old-school rules, the difference is immediately apparent.

"Good enough" frequently isn't.

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

[slim]

Ms Word does typesetting? Ha Ha Ha.

This is one of the problems with the freedoms that the computer revolution has given us. Anyone can design a book, or notate a page of music -- but can they do it WELL? Technology is sadly, no substitute for talent.

I'm totally with you on this, but again, the question is how many people care?

I think if you gave them a side by side comparison of LaTeX output vs Word output, most people would see that the LaTeX output was "nicer" for reasons they couldn't put their finger on.

But if you printed a book from Word and gave it to arbitrary people to read, what proportion would say "sorry, this is too ugly and difficult to read"?

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

[Anonymous Coward]

MIDI Notation might be neat.

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

[Anonymous Coward]

How complete is a MIDI file? Does it contain most of what is required to print an accurate score?

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.

Re:I'm afraid...

[timeOday]

I'm on ubuntu and apt-get install firefox installs 3.0.19, and the HTML5 music notation page shows nothing at all.

Re:Incredible? Really?

[Anonymous Coward]

It provides some interesting things. Instead of the metadata hidden in a big binary blob it moves things to be loaded by the standard tools. Instead of another exe/dll/.o to load things you use your existing browser. It lets search engines search thru the metadata and help categorize your website (if you like that sort of thing). It allows for changing the behavior by end users instead of being controlled by the producer (which may or may not be a good thing depending on your world view).

It is much more in line with 'open source'. Which is why sites like this are into it.

Really it is dragging the web browser into the 21st century. It has been stuck on 1998 for years now. It is like HTML4 came out and everyone went 'ok were done'. That HTML5 started picking up again is because MS is pretty much out of the picture now on driving the web standards.

I am excited about the web again (it has been awhile). I cant wait to see what new things people will cook up. This tech demo is just the sort of thing that makes the web cool.

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

[kiddygrinder]

IE 9 doesn't support canvas but it does support SVG. you *could* do a an IE 9 version of this demo in svg and i'd argue it would probably look better in svg, but i wouldn't as the lack of canvas tag support feels like ms sending a big fuck you to web devs once again.

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

[kiddygrinder]

Microsoft refuses to commit to a canvas tag, maybe you should learn to internet? Maybe *you're* confused between the canvas tag and svg support? the register

Re:"Incredible"? Really?

[Abcd1234]

Look, I like HTML5, just as I like HTML4, but the web is a terrible programming environment.

Hard to disagree there.

Javascript is great, but to listen to all the web 2.0/3.0/x.x proponents blather on incessently about how web applications are great and the way of the future and... blah blah blah. It's ridiculous.

Wait... what does that have to do with your first point?

For the users, yes, web applications are great, and for some things, they are the way of the future. It sucks for developers, to be sure, but that doesn't change that reality.

Re:I'm afraid...

[Anonymous Coward]

looks great in my Firefox 3.5.8 (Shiretoko under Ubuntu 9.04)

Can anyone recommend OSS software for...

[slim]

Broadly on-topic, I've been trying, and failing, to find OSS software that makes it easy to produce song sheets with time sigs, lyrics, chord letters and bar lines and little else.

Basically something easier to use and better looking than producing ASCII art thus:

4 |.C.....................|.G..........|
4 |.Hello darkness my old | friend.....|

(dots because /. collapses whitespace)

The closest I've found is MuseScore, but this *requires* you to have a note for each lyric.

Re:Can anyone recommend OSS software for...

[u38cg]

Latex could do that, though whether or not a package exists that already does it is another story.

Re:Can anyone recommend OSS software for...

[jluebke]

As recommeded by several above, Lilypond is worth a look. See some slightly more complicated examples in the Lilypond docs at: http://www.lilypond.org/doc/v2.12/Documentation/user/lilypond/Common-notation-for-vocal-music#Common-notation-for-vocal-music

Re:Can anyone recommend OSS software for...

[Anonymous Coward]

have you tried Rosegarden?
http://www.rosegardenmusic.com/

Re:Can anyone recommend OSS software for...

[slim]

I installed Lilypond a while ago, but I couldn't find a way to produce bars, lyrics and chords without a stave.

It's entirely likely that's my failing not the software's.

it does change the underlying tech

[circletimessquare]

rather than proprietary plugins, you get native support in the browser, in the markup itself

this is important, and it is revolutionary, and it is 100% worthy of the hype

it gets us out of this balkanized world of plugin nonsense and overlapping incompatible other track code bases. it gets us away from the nightmare of licensing and security issues and performance hiccups and browsers crashing and unresponsive threads running at 100% cpu, no power management... etc

html 5 is a much better world, for the user and the developer, and we cannot possibly hype html 5 enough to get us to this better world asap

Re:it does change the underlying tech

[edremy]

it gets us out of this balkanized world of plugin nonsense and overlapping incompatible other track code bases And puts us into a Balkanized world of different levels of HTML 5 support. Whoopie- enjoy coding neat stuff when IE9 won't support Canvas.

t gets us away from the nightmare of licensing Forgive me while I laugh. H.264 and Firefox?

and security issues and performance hiccups and browsers crashing and unresponsive threads running at 100% cpu Ok, never mind, you're delusional. You really, honestly think you'll have no security issues in HTML 5? That HTML5 will magically be able to animate faster than Flash with low power consumption? That it will never crash a browser? Pro tip: we don't even know what HTML 5 is yet The spec's not even finished, and won't be until 2012. Different browsers have different ideas of what HTML 5 is right now, and will for quite some time. Since nobody's written an actual complex product in HTML5, we don't know how it will perform, or how hard it will be, or what sort of security holes it will open.

Re:Incredible? Really?

[cowscows]

Look man, this is a nerdy site. People here are impressed by the underlying tech.

A new way to do things is always interesting.

Re:"Incredible"? Really?

[Assmasher]

For the users, yes, web applications are great, and for some things, they are the way of the future

The idea of Web applications is great, web applications themselves that rely on HTML/XHMTL and JavaScript are awful. Personally, I think the way of the future is purely web services consumed by specialty applications, not what we consider a 'web browser' today, where the HTML aspect of the web (typography/layout) is not the primary medium of the internet - data is, and HTML is merely a subset of that. Think of it like Google maps except that the UI isn't some crappy hodgepodge of the limitations of HTML but a specialist client or client library that eats/breathes/sleeps Google Maps web API. That's a few years off though (at the very least) but certainly the way of the future.

Now, what I hope, but which is a pipe dream since fragmentation is so much more likely a scenario, is a single interpreted/JIT'd programming language that doesn't suck and/or isn't pushed by only one company (I'm looking at you Java, and you Flash, and to a lesser extent you .NET) that becomes a core of every 'web browser.' This would avoid all the disparate tools approach to consuming data which is where the internet (not the web) is most likely headed...

I would certainly love a Java/.NET capability in something akin to applets except with good UI code, good tools, and a safe but useful (as in access to some native hardware like the video card) sandbox (yeah, I know, Santa Claus is real too...)

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

[mixmasta]

jQuery or not this is beautifully done. I hope to see more music notation on the web. IE, meanwhile should be taken out back and shot.

Hurray

[sunking2]

I actually like this idea as I've thought of building a web based guitar pro that would work on an android for some time.

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

[Mister Whirly]

In dead last place in the browser wars? That's a bold prediction. I mean this is Slashdot and we have all heard the "this move is the beginning of the death of Microsoft", but you sir have balls.

Re:Incredible? Really?

[edremy]

It provides some interesting things. Instead of the metadata hidden in a big binary blob it moves things to be loaded by the standard tools. This makes no sense- in what way is XML not standard? Flash has been storing metadata in XML files for ages.

Instead of another exe/dll/.o to load things you use your existing browser. Assuming your browser understands all of HTML 5. (Hint- look up Canvas and Microsoft) And that it has the proper codecs to understand video. I use Firefox- do I need to give up on Youtube?

It lets search engines search thru the metadata and help categorize your website (if you like that sort of thing). And this is different from Flash how?

It allows for changing the behavior by end users instead of being controlled by the producer (which may or may not be a good thing depending on your world view). This comment is nonsensical. Changing what behavior? If you mean that you can see all the HTML5 source, that might be useful for some but there are an awful lot of folks out there doing commercial work that won't be happy about that.

I am excited about the web again (it has been awhile). I cant wait to see what new things people will cook up. This tech demo is just the sort of thing that makes the web cool. The web's always been cool. Check out some Flash sites- they've been doing the same stuff you're so excited about for the past five years. (Hint- Flash is used for more than video, games and ads) When something like Kaltura ports itself to HTML 5 then I'll start to be impressed

Re:Not Sure if You Can Call That a Demo

[Gr8Apes]

My mistake, please mod my original post down.
 

ok :)

Re:Incredible? Really?

[sootman]

And there were networks and ways to share documents before the WWW, but look how that's taken off. Being able to do things that used to require expensive, proprietary systems with free, open, standards-based methods is ALWAYS worth hype. You want lightning? Wait until we can do fabulous things on ALL mobile devices with just a good browser and NO additional software from any particular company. "Lightning" happens when millions of people can do something for free that only thousands of paying customers used to be able to do.

Stop the presses!

[0xdeadbeef]

A drawing API allows drawing!

I wonder how many people realize that a low-level drawing API undermines the very ideology that says HTML-based applications are better than native applications.

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

[Dishevel]

Way to post AC while stating "facts" that you must know are bullshit. next time you post complete lies use a second /. account just for jacking Balmer off. Otherwise just stay the fuck out of my tubes.

Re:I'm afraid...

[Anonymous Coward]

so it's firefoxs' fault is it!!! priceless!!!

this html5 bullshit is going from bad to worse... if only the endearingly hopeful proponents could realize how this makes them appear!!

of course anyone so zealous and deluded isn't going to see the funny side of many things, lets face it =)

full-featured OSS music notation software

[bcrowell]

There is very good, full-featured, open-source music notation software available. The program I've used is called lilypond. The people who wrote it put a huge amount of effort into studying high-quality music notation, so the scores really come out looking nice. It's cross-platform.

I get the impression that very few actual working musicians have switched to lilypond, or even heard of it. The main problem is probably that lilypond is basically a non-GUI program; you enter your music in a cryptic computer language, and the compile it. There is a GUI front-end called Denemo, which has been moving along, but very, very slowly. Most musicians seem to use Finale. Once they've paid the money for Finale, they don't have any motivation to try other software. I haven't played around with the latest version of Denemo very much, but superficially it doesn't appear to be anywhere near as full-featured as Finale's GUI, even though lilypond probably *is* right on par with Finale in terms of its feature set. There is a program to convert Finale to Lilypond (called etf2ly), but I don't know how good it is. One thing that's frustrated me as a lilypond user is that the language is continually in flux. The developers keep introducing changes in the syntax, which I have to learn. When you upgrade lilypond, you're supposed to run all your source files through a converter to get them into the latest syntax.

It's conceivable that something web-based like this could really be a disruptive technology that would break people out of the proprietary Finale world and get a lot more people using OSS for music notation, but there would have to be some upgrade path from the web-based app to a full-featured OSS app. It would really be cool if that could happen. For instance, I play viola. Say I want to make a viola arrangement of a public-domain violin piece. It would be great if there was a large population of people standardized on an OSS format, so that I could just find someone's violin file that they'd released for free, and transpose it into viola clef. This exists right now in projects like Mutopia and Werner Icking Music Archive, but those projects are not as all-encompassing as what you might get if they were in file formats that were used by more than 0.1% of musicians.

SVG

[Anonymous Coward]

Ain't SVG nice?
I've already coded SVG stuff with raw javascript, and I hope that GWT will support more SVG feature soon.

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

[hesiod]

I prefer, and pretty much only use FireFox, but I notice that the FF numbers are not broken down into major versions like IE is. Possibly because it likes to auto-upgrade itself, but presenting it like that seems to hint at at least a slight bit of dishonesty.

Music notation rendered to SVG with audio

[Anonymous Coward]

This is a shameless plug for my own (GPL'd) project, which does the same thing, but uses ABC as a basis. I think we're further along with the layout engine, are interactive and have audio rendered with midi.

http://www.drawthedots.com/abcjs

Nothing of this detracts from the fact that the future is most definitely here and we are just beginning to scratch the surface of what will be possible... I'm way beyond excited!

Gregory

Re:Music notation rendered to SVG with audio

[gravyface]

Nice! Although 1/32 time was not as cool as I thought it was going to be.

Not "beautifully rendered"

[AthanasiusKircher]

While I certainly applaud the effort to create a music-editing program in an HTML5 app, this is far from "beautifully rendered music notation."

Basically, from the "demo," we can see that he's managed to map music glyphs onto staves. That's barely "music notation," and it certainly isn't "beautiful" yet. As others have pointed out, there doesn't seem to be a lot of attention paid to spacing, sizing, general layout, etc.

I'm not saying it isn't promising, but if music notation were easy to do well, a few applications like Finale and Sibelius wouldn't have a complete lock on the professional market. Lilypond is the only good open-source alternative I know of, but it isn't WYSIWYG, and I don't know of a free WYSIWYG music notation program with high quality output, i.e., the kind that a professional musician would like to use.

Calling this "beautifully rendered music notation" and saying this guy has a "music notation engraver" is sort of like saying that somebody who built a basic text editor that outputs plain text without formatting has created a "publishing application" that "renders beautiful typeset prose."

Re:Not "beautifully rendered"

[Anonymous Coward]

Finale and sibelius are the best, but not even they are used to produce the music sold by most publishers. The result simply isn't good enough.

Re:Not "beautifully rendered"

[AthanasiusKircher]

Finale and sibelius are the best, but not even they are used to produce the music sold by most publishers. The result simply isn't good enough.

Yes, of course you're right. I brought them up because they're the most common apps familiar to home users. Many professional publishers use true layout apps, sort of like doing Lilypond free-form "without a net." Like most word processors, Finale and Sibelius have the problem that they are trying to do too many things -- composition, music editing, playback, sound synthesis/sampling and even editing in output, etc. as well as music typesetting. It's pretty hard to duplicate the output of a skilled engraver who knows how to tweak a score for best readability.

Re:Not "beautifully rendered"

[acheron12]

Lilypond is the only good open-source alternative I know of, but it isn't WYSIWYG, and I don't know of a free WYSIWYG music notation program with high quality output, i.e., the kind that a professional musician would like to use.

Musescore (cross-platform) and Rosegarden (Linux only) are GUI score editors that automatically export to LilyPond for rendering.

Pah! Here's beautiful notation.

[Spatial]

Beauty :)

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

[TheRaven64]

The FireFox version numbers are available too. They are Firefox 3: 2.75%, Firefox 3.5: 5.81%, Firefox 3.6: 15.33%. FireFox 2 only has 0.56% and the total for all other versions is under 0.01%. Basically, almost everyone using FireFox is using the 3.x series. Unlike IE, there is little reason to use older versions of FireFox. There are no lock-in technologies in FireFox that are dropped in later versions for security reasons and there are no large sites (public or intranet) that only work with FireFox 1.x or 2.x.

I'm not sure why there are so many people on older versions of the 3.x series, but I imagine that they're people who haven't got around to upgrading yet.

I don't really like FireFox personally, but it is much easier to treat all FireFox users as a blob, when it comes to support, than treating all IE users the same way. A site that will work with all FireFox versions with more than 1% market share is much easier than one that works with all IE versions with more than 1% market share.

IE7 and 8 are relatively similar, so you can probably blob them together, but that still only gives you a slightly higher share for IE7/8 than for FireFox 3.x.

WTF was he rendering?

[bigredradio]

I am not sure about the musical notation, but the tab is completely unplayable. Note the 12 12 12 AND the 2 nd string. Good luck making your fingers do that. Also, my guitar does not have 23 frets. And I especially cannot hit the 23rd fret while pressing down the 5th fret. WTF?

Re:WTF was he rendering?

[blair1q]

Think stress test, not nominal.

Re:WTF was he rendering?

[u38cg]

You have two hands, do you not, young padawan? And teeth?

Re:WTF was he rendering?

[orgelspieler]

Even Lilypond can't figure out good fret/string arrangement without a little help. So that's excusable. Also, I'm impressed that you have a 23rd fret.

Re:WTF was he rendering?

[bigredradio]

No, I do NOT have a 23rd fret. However it is possible with a Bill Lewis guitar - http://www.gilmourish.com/?page_id=89

Misuse of the word "beautiful"

[Anonymous Coward]

Music notation software is complicated and the ability to render it in Javascript is impressive, but I don't think that the brownish-gray of the current product qualifies it as beautiful.

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

[pdusen]

That depends on your idea of "last". If you consider "last" to be the position with the fastest growth in market share, then yes, Chrome is in last and IE is in a comfortable first.

Irony

[stewbacca]

"HTML5 not supported in this browser".

Not to sound like a neophyte, but this is dangerous for widespread HTML5 adoption. Most users just want it to work. I'm using a fairly modern browser here at work (IE7) and it doesn't work without doing something (I don't know what I have to do, it's probably really easy, but my point is still valid).

Re:Irony

[blair1q]

"fairly modern browser here at work (IE7)"

1. IE ('nuff sed for many)
2. Not the latest rev, certainly not later than the HTML5 standard.
3. Microsoft has made noises yet again about never actually standardizing per the standard.

If your point is that you want a quill pen to be able to browse the web with 100% functionality, then you need to sharpen your point.

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

[jc42]

IE, meanwhile should be taken out back and shot.

Actually, we did that back in the late 90s. We left IE as del'd fragments on millions of disk drives around the world. The result was that hordes of zombie IEs arose from their remains on those disks, and chewed on the brains of managers around the world, until they adopted a policy of enforcing an IE-only policy in their organization. And, like all software, a new clone of IE can be cheaply produced in under a second by a mere copy operation. Of course, the clone won't run on the same machine as the original, but that's as planned, since the intent was to install the clones on more millions of new machines as the default browser.

The Internet is living (if you can call it that) with the results. IRL, it's a lot harder to eradicate a zombie horde than it is in the movies.

Re:Incredible? Really?

[Rhuragh]

If I had mod points, I'd mod you up. Kudos.

I don't think of this as direct competition

[JSBiff]

I suppose eventually, this tech has the ability to develop into something competitive, but one could also view this as a tech that can be used along-side of a full-featured music composition program. I mean, I'm sure there's times when musicians would like to put some of their music (whether just excerpts, or full scores) on their website, and this tech opens the possibility that maybe they could take the music from their compo program, and 'export it' so that it can be displayed in any HTML5 compatibile browser.

Even if proprietary programs like Finale don't end up using this software directly, because it shows that it is *possible*, it could have an impact in moving the proprietary programs to include similar functionality.

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

[Anonymous Coward]

"fastest growing market share" is double speak for "our market share really sucks now, so it can only get better".

Re:Incredible? Really?

[game kid]

Psst, not too loud. The puppy-eyed IE-spiting fanboys might deflate and cry!

I agree that HTML5 is unexciting hype. Base the next HTML on XHTML 1.0 and I'll care.

Re:I'm afraid...

[DMUTPeregrine]

Interesting. I'm on Kubuntu 10.04 and the repo-installed Firefox is at version 3.6.3 and the page displays fine.

it's a shame

[blair1q]

it's a shame that B33th0ven never had anything like this. It's my theory he went deaf from absent-mindedly poking himself in the ear with a quill.

There's a big difference

[ClosedSource]

"MS is still trying to find how to make internet MS-only."

I guess what you mean is that MS is trying to make the Internet IE-only.

One word: HTML5

[ClosedSource]

I have no idea if your point is well taken but remember that this story is part of Slashdot's HTML5 promotion effort and thus the best way to do it is irrelevant.

Re:Incredible? Really?

[Anonymous Coward]

So how's that Flash working out for you on that handset?

Re:Good job. Need more. (Much more.)

[Kalvos]

As a music copyist for 40+ years, I'd say this may be a cool concept but has dreadful results. There have been hundreds of programs that produced amateur results like this since the early 1980s, and most of them couldn't (and still can't) do basic contemporary notation. That's why ABC notation is also pretty useless. If it can come close to doing this with good character balance and incorporation of graphical elements -- most of which Finale could do 15 years ago and Score could do long before that -- then it's a start.

I love new implementations, but as any professional in any field knows, ultimately it's what you implement that matters.

Dennis

Please back my project! at Kickstarter.

Sure

[ClosedSource]

""Lightning" happens when millions of people can do something for free that only thousands of paying customers used to be able to do."

It's not as if I have to pay an ISP for browsing at home or a cellular provider to browse on my phone, or have to put up with ads. Yep, it's all free thanks to open standards.

Re:Pah! Here's beautiful notation.

[orgelspieler]

I'm pretty sure I just got Rick-rolled.

Images, anyone?

[Anonymous Coward]

I wouldn't call it amazing. I'd rather see an image loading on screen please. Images have worked for ages, so why bother writing it all in Javascript?

Not useful

[Alexvthooft]

This is never going to be useful to actual composers. You want easy acces to what you are doing and not typing the letters. Plus can we listen to the notes? Quite important for a composer! Even Sibelius is sometimes somewhat gloggy and cumbersome and that's one of THE programs out there. Long way to go? I would say so!

Re:Not useful

[profplump]

Some people would consider typing the letters to be "easy access" compared to the click-drag sort of interface the Sibelius offers. And it wouldn't be terribly difficult to rig up a MIDI device to "type" the letters if you wanted to integrate a keyboard. It's not necessarily the right choice for everyone or every project, but it's silly to dismiss it as useless.

You're also missing the possibility of, for example, allowing Sibelius to export to HTML pages for easy sharing with people that don't have the $$$ to drop on such a program. I know you can print from Sibeilus, or export to MIDI, but it doesn't have any option to export an editable file that includes all the typography markup without also requiring an expensive software license.

As for playing sounds, that's not the point of this project, but being able to translate "b5" into a noise is something that's pretty trivial and could easily be added -- it's supported by most BASIC environments as far back as multi-tonal audio was available.

Re:Not useful

[Alexvthooft]

Although your points are absolutely valid it still doesn't change anything to the fact that this isn't useful to actual composers! Which was my main point.

I absolutely agree with you that it is a good substitute for people who use notation once every now and again!

Plus inter-program-exchange of midi/notation files has always been a problem. Until a standard for this is conceived no 2 programs will be able to exactly share the same files.

Not only that, MIDI is so common and there are so many free programs out there that it is almost no trouble to download one and read the midi file, except for the fact that they often don't relay the correct info.

Re:Not useful

[Kalvos]

You're correct. I understand the geek nature of the idea, and how any out-of-field implementation looks great. The problem is that music notation is badly understood even by those programming it, and even more badly programmed because programming begets programming -- in other words, just as there are many who think MP3s sound better than full-range high-resolution version, there are many who think amateur music notation looks just fine. They've gotten used to it, and don't actually look at fine metal plate engraving when designing the software. Were the same lack of understanding and poor implementation (even as a demo) brought to an accounting program or photo editor or even a book on Linux, it would be committed to the great hells of derision and disdain.

Dennis

Pleae back my opera on Kickstarter

Re:Not useful

[Alexvthooft]

Thnks and one of the things that really bugged me about the examples was that they were clear examples of a programmer. Those sequences or combinations would never be used in real life. I would rather have seen it show Bach's Prelude in C minor (or whatever) than these random itterations. I get the fact that he tried to show the possibilities, but still....

But you don't neeed HTML5 OR Flash

[WebCowboy]

It provides some interesting things. Instead of the metadata hidden in a big binary blob it moves things to be loaded by the standard tools.

You could do musical notation like this with already-established standards, without plugins, without deploying BLOBs. You could use XHTML and SVG and any one of a good selection of javascript frameworks (jquery is referenced in the demo but not at all involved in the actual rendering of the musical notes) to make it all dynamic. In fact not only could you do it, it would be a technically superior solution (canvas is easier to use as it is in the demo, but SVG is far more sophisticated and powerful).

It has been stuck on 1998 for years now. It is like HTML4 came out and everyone went 'ok were done'

I think it's more like you've been hiding under a rock since 1998. The W3C didn't say "we're done" they said "this is a mess, let's clean it up for real" and created XHTML1, then fixed a couple of things to issue XHTML1.1. See HTML is a bastardised form of SGML and traditionally was implemented as "tag soup". XHTML made the rules more concrete--it insisted on being well-formed XML so XML parsers could consistenly parse it, and the use of a dtd so that user-agents could be directed on how to render it, etc. XHTML made the source behind web pages sane again.

But then something fell of the rails at W3C. They started working on XHTML2.0 and figured that they had to throw the baby out with the bathwater AGAIN. Problem is that XHTML2 mostly solved problems web developers didn't have (XHTML1.1 could server the purpose for the most part) and where it did address weaknesses it was grossly overengineered (hello XFORMS). Compound that with the fact that they decided to overhaul a spec (breaking some compatability on the way) that developers of browsers had only started to adopt and the process of standardising took SOOOO long. XHTML2 is an idea that should never have existed.

So, now you have all these web browser developers saying "this sucks you keep changing things too fast and breaking what we use!". Plus I think they were all a bit lazy or stuck with code that was hard to manage (make a full and proper XML parser or code generator? too hard!) but above all else large content developers were DEFINITELY lazy (we like our tag soup! we're too dumb to care about case sensitivity and closing brackets like real programmers have to!). This with XHTML2 the W3C goaded borwser makers and content creators into forming the WHATWG faction, who figured they'd maker their OWN standard--HTML5--using HTML4-like "Tag soup" as the foundation.

HTML5 is very nearly as bad a mistake as XHTML2 (the ONLY thing that is better is the pace of developing the standard and its adoption rate). They tossed away all the benefits of being an XML-based spec and wound the clock back years to re-invent things in an "easier" but more hackish way. WHY OH WHY couldn't have the compromise between W3C and WHATWG be..I dunno...maybe XHTML1.2??? I think that the formal mention of the "XHTML5" variant (ie. HTML5 beaten into XML submission) is tacit admission that tag soup is a mistake.

I guess I cant get everything I want...at least HTML5 is an open, unencumbered standard as cruddy as it is.

FF3:HTML5 Canvas not supported on this browser.

[cmholm]

Even though the score rendered cleanly, the html code said the same thing on my copy of FF3.6.3 (WS 2003).

Re:Incredible? Really?

[thetoadwarrior]

Sure Flash does more now because it has a head start but initially Flash was very basic. But people have done things like Super Mario Bros (minus sound if I remember) in Javascript and a lot of things now are just demos to prove a point. People can and will eventually do better things. There is a higher learning curve because it won't have Macromedia / Adobe's Flash app for creating things in a gui with minimal coding.

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

[billcopc]

http://code.google.com/p/explorercanvas/

Sure, IE doesn't natively support the Canvas tag, but a little bit of Javascript goes a long way toward fixing that.

Maybe not

[tqft]

but this stuff might be:

http://vocamus.net/dave/?p=1074

found on planet.mozilla

Re:Good job. Need more. (Much more.)

[space_in_your_face]

This is the real test for any music typesetting system...

Re:Good job. Need more. (Much more.)

[Kalvos]

That's been going around for many years -- and it HAS been done. I don't have the link, but somebody took it on and did it in Finale.

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

[DaVince21]

IE9. You know, the browser nobody has yet.

Re:I'm afraid...

[DaVince21]

Aren't you the one behind the times? It works fine in 3.6.

Cool

[niftymitch]

Real cool.... it is very well done.

what?

[Anonymous Coward]

I don't get it, sorry. Whats new about this?