Beautifully Rendered Music Notation With HTML5 259
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."
The Rush to HTML 5 (Score:3, Insightful)
I can almost hear the thundering footsteps of developers rushing to HTML 5. I have to admit, I'm one of them.
Re:It has external dependancies (Score:2, Insightful)
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:Same in Google Chrome (Score:3, Insightful)
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:Only relevant (Score:4, Insightful)
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:Good job. Need more. (Score:1, Insightful)
I read you post as: "I know some basic things about music and need others to know that I do."
Incredible? Really? (Score:5, Insightful)
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 [songsterr.com], and nobody calls them incredible. I look at the moving dot demo and then go back to Prezi [prezi.com], or listen to all the stuff about video in HTML 5 and then go work in Kaltura [kaltura.org] 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.
Music typesetting isn't as easy as it looks (Score:5, Insightful)
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 [recordare.com], 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:Incredible? Really? (Score:1, Insightful)
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:It has external dependancies (Score:3, Insightful)
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 (Score:4, Insightful)
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:mod parent up! (Score:1, Insightful)
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:Incredible? Really? (Score:3, Insightful)
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.
Not "beautifully rendered" (Score:4, Insightful)
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:Good job. Need more. (Much more.) (Score:3, Insightful)
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 [maltedmedia.com] 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! [kickstarter.com] at Kickstarter.