Slashdot Mirror
Beautifully Rendered Music Notation With HTML5
An anonymous reader writes "This is incredible. This guy has built a music notation engraver entirely in JavaScript, allowing for real-time music editing right in the browser. Here's a demo. The library has no external dependencies, and all the glyphs, scores, beams, ties, etc. are positioned and rendered entirely in JavaScript."
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).
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.
"Seven Deadly Sins? I thought it was a to-do list!"
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.
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.
Don't thank God, thank a doctor!
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."