Please create an account to participate in the Slashdot moderation system

 


Forgot your password?
Close
typodupeerror
×
Music Software Graphics

Beautifully Rendered Music Notation With HTML5 259

Posted by timothy from the pretty-printing-for-piano dept.
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."
This discussion has been archived. No new comments can be posted.

Beautifully Rendered Music Notation With HTML5 More

Beautifully Rendered Music Notation With HTML5

Comments Filter:
  • 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.

    • 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 (Score:4, Informative)

        by maxume ( 22995 ) on Friday May 14, 2010 @07:32AM (#32205856)

        http://jsbeautifier.org/ [jsbeautifier.org]

        Try not to get too hung up on deciding if the name is impossible, it works great.

      • Re: (Score:3, Informative)

        by 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: (Score:2, Insightful)

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

      • 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 (Score:5, Informative)

      by AdmiralXyz ( 1378985 ) on Friday May 14, 2010 @07:40AM (#32205916)
      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: (Score:3, Informative)

        by mdda ( 462765 )

        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.

      • 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: (Score:3, Insightful)

      by Abcd1234 ( 188840 )

      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 br

      • Re:It has external dependancies (Score:4, Insightful)

        by SanityInAnarchy ( 655584 ) <ninja@slaphack.com> on Friday May 14, 2010 @09:33AM (#32207072) Journal

        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.

        • 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 sc

          • Re: (Score:3, Informative)

            by SanityInAnarchy ( 655584 )

            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. [jquery.com]

            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

  • The Rush to HTML 5 (Score:3, Insightful)

    by silverbax ( 452214 ) on Friday May 14, 2010 @07:15AM (#32205750)

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

    • 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: (Score:2)

        by tepples ( 727027 )
        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.

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

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

  • Copyright Infringement (Score:5, Funny)

    by turgid ( 580780 ) on Friday May 14, 2010 @07:15AM (#32205754) Journal

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

    • Re: (Score:3, Informative)

      by account_deleted ( 4530225 )
      Comment removed based on user account deletion

      • Re: (Score:2)

        by turgid ( 580780 )

        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.

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

      • Re: (Score:2)

        by robkill ( 259732 )

        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 [wikia.com]

    • 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: (Score:2)

        by Rary ( 566291 )

        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 (Score:5, Funny)

        by drinkypoo ( 153816 ) <drink@hyperlogos.org> on Friday May 14, 2010 @09:17AM (#32206872) Homepage Journal

        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.

  • Good job. Need more. (Score:5, Informative)

    by Corf ( 145778 ) on Friday May 14, 2010 @07:25AM (#32205812) Journal
    I'd like to see accidentals [wikipedia.org] 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.

    • 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

  • Only relevant (Score:5, Informative)

    by toxygen01 ( 901511 ) on Friday May 14, 2010 @07:27AM (#32205822) Journal
    part for the coders is:
    http://0xfe.muthanna.com/jsnotation/vexnotation.js [muthanna.com]

    this is the code responsible for generating the content.

  • Rickroll (Score:5, Funny)

    by kiehlster ( 844523 ) on Friday May 14, 2010 @07:27AM (#32205824) Homepage
    And here I was hoping they'd do the obvious and give us beautifully rendered Rickroll tabulars.

  • Comment removed (Score:3, Informative)

    by account_deleted ( 4530225 ) on Friday May 14, 2010 @08:23AM (#32206332)
    Comment removed based on user account deletion

    • Re: (Score:3, Informative)

      by u38cg ( 607297 )
      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.

  • Incredible? Really? (Score:5, Insightful)

    by edremy ( 36408 ) on Friday May 14, 2010 @08:25AM (#32206362) Journal
    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 [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.

    • 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: (Score:3, Insightful)

      by sootman ( 158191 )

      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

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

  • 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 [native-instruments.com], 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 [youtube.com]: http://navid.radiantempire.com/pub/pix/Lustiges/aphex_twin.jpg [radiantempire.com] ^^

    • 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 [youtube.com]

      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.

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

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

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

  • 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 throug

    • Re: (Score:2)

      by slim ( 1652 )

      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.

    • 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

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

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

  • Music typesetting isn't as easy as it looks (Score:5, Insightful)

    by ommerson ( 1485487 ) on Friday May 14, 2010 @09:00AM (#32206678)
    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 [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: (Score:2)

      by slim ( 1652 )

      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 programm

      • 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 meta

        • Re: (Score:2)

          by slim ( 1652 )

          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: (Score:3, Informative)

        by ommerson ( 1485487 )
        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 looki

      • Re:Music typesetting isn't as easy as it looks (Score:4, Informative)

        by AthanasiusKircher ( 1333179 ) on Friday May 14, 2010 @10:17AM (#32207602)

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

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

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

  • Not "beautifully rendered" (Score:4, Insightful)

    by AthanasiusKircher ( 1333179 ) on Friday May 14, 2010 @10:49AM (#32207972)

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

  • Pah! Here's beautiful notation. (Score:3, Funny)

    by Spatial ( 1235392 ) on Friday May 14, 2010 @11:00AM (#32208090)
    Beauty :) [lsnk.org]

Slashdot Top Deals

It is contrary to reasoning to say that there is a vacuum or space in which there is absolutely nothing. -- Descartes

Close