Tuesday, May 11, 2010

Music Notation with HTML5 Canvas

I spent a few weekends trying to scratch an itch. While looking for online tools to create and render music notation, I was mildly disappointed. The only real options were crummy flash based sites or clumsy server-side image renderers. Neither of these were particularly appealing.

So I pulled up my sleeves, and cooked up a full-fledged JavaScript API to engrave musical notation directly in the browser with the HTML5 Canvas element.

Here's a demo: HTML5 Music Notation Demo

The library has no external dependencies, and all the glyphs, scores, beams, ties, etc. are positioned and rendered entirely in JavaScript.

One of the cool things about this is that I can now build interactive music sheets that respond to user events like score editors.

So here are all the features I have so far.

1. Basic staff and chord support.


2. Accidentals and beams.


3. Support for all note values with correct rhythmic positioning.


4. Support for rests, ties, and multiple voices. (Note the positioning of the notes.)


5. Support for guitar tablature.


6. Multiple voices in both staff and tab scores.


7. Broken bars, odd-timings, custom glyphs, basic interactivity, and a full suite of unit tests (I love QUnit).

I have a fair bit of work to do before I can make it available. In particular, I want to build a simple language that allows users to easily create scores. Something along the lines of the following:

score {
  title: Hip Tune
  artist: Hip Person

  bar { v8 C4 D4 E4 F4 (C4 E4 G4) } 
  bar { v8 C4 D4 E4 F4 (C4 E4 G4) } repeat 3
}

The above is just an idea - I haven't really given it much thought. But the intent is to make the language easy to read and accessible to non-geeks. I'm open to suggestions related to what the language should look like.

Let me know what you think.

161 comments:

  1. Nice!

    I had the same idea once and started to build a tab-rendering website, but yours seems to be much nicer, so I am very curious about the resulting code.

    Combining this with HTML5 Audio for playing the sheet in real time, combined with a designation seems to be the next logical step. I've looked into it, but it doesn't seem so straightforward as there is no MIDI-support.

    ReplyDelete
  2. You need to look at ABC notation.

    ReplyDelete
  3. Very nice!

    In ex. 2, shouldnt the e and the f (with double sharp) on the same beat be pointing in each direction? Like here:
    http://imgur.com/QozO7.png

    ReplyDelete
  4. This looks very nice.

    Is there a way to get print resolution higher? Currently in chrome, it looks pixelated when saving as PDF.

    ReplyDelete
  5. I love the idea, and applaud your effort! I'm just wondering if there was a practical reason to use Canvas instead of SVG?

    ReplyDelete
  6. Wow. This looks fantastic. I can't wait to see the finished product! Also, if you haven't heard of MusicXML (see http://www.recordare.com/xml.html) it is a pretty robust music notation format with many downloadable scores already in xml format to play with :)

    Great work!

    ReplyDelete
  7. I love you! Thank you so much!

    ReplyDelete
  8. check out lilypond http://lilypond.org/doc/v2.12/examples

    ReplyDelete
  9. Nice, could it also be made to use SVG?

    ReplyDelete
  10. No need to develop a new notation, just implement ABC notation as it's widely in use and well-documented. Then your library would get some SERIOUS use.

    ReplyDelete
  11. @Mikkel -- There are multiple voices, top voice always points up

    ReplyDelete
  12. Thanks for the comments everyone!

    @Mikkel, yes that's a bug... i'll fix that.

    @Anonymous(1) ... you can scale this to any size and have beautiful looking scores, since all the drawing is vector-based (lines and curves).

    @BTreeHugger ... no SVG because Canvas has broader browser support... it's more about practicality... (besides, do you think I _like_ coding in Javascript? :-)

    @Scott (and others who suggested it)... ABC notation looks like a nice simple language... I'll dig into it some more... (if only it supported tablature...)

    ReplyDelete
  13. @Elliot, I think he's talking about the direction of the note heads (and not the stems).

    ReplyDelete
  14. http://lilypond.org/

    ReplyDelete
  15. If this were in SVG, rather than Canvas, then you could use tools like PrinceXML to print the results.

    ReplyDelete
  16. Very cool. I love music programs, and this should be great for the composers out there.

    ReplyDelete
  17. @0xfe - oh wow, that is so cool! As someone who started implementing something similar (as you've seen), it brilliant to see someone else doing it.

    I haven't dug through the code yet to see exactly how you broke down the various problems (defining lengths of bars, making sure bars on related staffs (tab and score in your example) are positioned right, etc.), but I look forward to reading the source as soon as I have a moment free.

    Personally, I went the "wrong" way about, basically just drawing immediately to the screen, where I should really have just measured first, and drawn at the end.

    As others have commented, the Lilypond site is a great resource. This essay was really interesting when I was working on it myself. You've gone well beyond what I did, though, so have probably already seen it.

    ReplyDelete
  18. the demo has no doctype so its technically not html5. the demo is also using the "center" tag which is not supported in html5.

    ReplyDelete
  19. A friend just pointed me at this; a totally excellent idea, well started. Maybe your target should be MuseScore?

    Also, ABC and lilypond etc exist, but that doesn't necessarily mean they provide the best language in which to write stuff. As soon as you start writing { } in javascript, why not use JSON and maybe a converter to/from the other formats as required?

    ReplyDelete
  20. @roycifer Way to focus on the big picture

    ReplyDelete
  21. I'm not a musician, but the end result looks beautiful. Well done!

    ReplyDelete
  22. Keep up the good work!!! :-))

    ReplyDelete
  23. I'm curious as to how you designed the notes (they look beautiful by the way). Did you draw them in something and export them as vectors, or was it a trial-and-error sort of thing where you would write something, render it and see how much it looked like your goal?

    ReplyDelete
  24. Please don't use canvas - it's not accessible at all. Use SVG instead. Browser support is the same, it's not more difficult, and you'll be able to make result accessible, scalable and editable.

    ReplyDelete
  25. My word, some people are missing the point! This is great stuff, count me in as a user and future contibuter!

    I second the ABC notation idea also.

    Any plans for lyrics/chord notation?

    Also release early and often - share the code and we'll help! I actually like javascript :)

    ReplyDelete
  26. Language suggestion.
    http://jashkenas.github.com/coffee-script/

    ReplyDelete
  27. I've toyed around with the idea of creating a "Guitar Hero"-like tablature scroller for reading music. If the rendering of this music could be controlled so that you could turn pages in time, or scroll horizontally at a set BPM that would be amazing.

    ReplyDelete
  28. Very, very nice!

    Suggestion to you - your proposed language is so close to JSON - why not just make it JSON and then you can, e.g., just paste it into your Javascript programs?

    (Oh, I see someone else has suggested it.... well, do consider it, because JSON is the natural Javascript interchange language...)

    Do you have a mailing list for this project?

    ReplyDelete
  29. This looks fantastic!

    IRT comments mentioning ABC, MusicXML, lilypond and etc: I think it's useful to keep (and expose) an intermediate representation. You already have an internal representation in Javascript land. You would gain a lot by exposing this interface as JSON.

    The rendering engine is really the killer app here. Tying it down to a specific notation, framework, etc is limiting.

    I think the best way to approach this would be to open source the rendering engine and the JSON notation format; provide a reference implementation using (say) jQuery and ABC; and let the open-source community develop against their preferred notation, javascript framework, etc.

    I think this would provide maximal reusability and benefit to the community.

    I would love to work with you on this. This is an itch I've been meaning to scratch for a LONG time. Maybe we can get some hot Github action going? Working on an ABC parser and jQuery wrapper for your rendering engine would be a lot of fun and immediately useful as well.

    Cheers!

    ReplyDelete
  30. Ugh. Previous comment was mine.

    ReplyDelete
  31. This is very good. You should check out both LilyPond and ABC for possible notational inspirations.

    ReplyDelete
  32. Hi,

    You should check out what notation they use for music
    in LaTeX:
    http://icking-music-archive.org/software/indexmt6.html

    ReplyDelete
  33. This is amazing work. The result is beautiful and crisp. Please follow this through until completion!

    ReplyDelete
  34. We are involved in a similar project... My demo page is out of data, but an earlier demo can be found at:

    http://r3jjs.com/js/hdots/

    Or you can go to http://code.google.com/p/highlanddots/ and see our latest developmental code.

    ReplyDelete
  35. The Tab support is killer, really nice. I would only suggest that it would be really really good if the tab notes blanked out (either opaquely or transparently) the line behind them, for readability.

    ReplyDelete
  36. Hey,

    Looks really neat. We're hacking on HTML5 audio, and together could probably get this playing as well as displaying. Check out our work here http://vocamus.net/dave/?p=1074

    Dave

    ReplyDelete
  37. For notation, you might consider digging up the Commodore 128 or PCjr notation language.

    http://www.commodore.ca/manuals/128_system_guide/sect-07b.htm#7.3.2.3

    The PLAY statement for the Commodore 128 might help you round out the notation language some.

    ReplyDelete
  38. This is a great start. I had a similar idea and knew I that HTML5 was going to have a solution.

    ReplyDelete
  39. Thomas: the BASIC 7.0 PLAY statement was cool, but it has a number of limitations that mean it won't work for a lot of real-world music. Some note durations just can't be represented - no triplets, no 32nd notes, no sustained note longer than a dotted whole note. In practice you could use tempo-changing tricks to achieve the desired sound, but as a musical notation it's wanting.

    I agree that a JSON-based API is the way to go, with maybe predefined converters for a common standard like ABC; let folks write their own converters for MusicML or whatever.

    ReplyDelete
  40. Doesnt work on Firefox in mac.

    ReplyDelete
  41. Just throwing another idea out there… it would be nice to make this at least somewhat MIDI compatible. For example, while a human readable form for the notes is nice (e.g. C4, D5, etc…), it would also be pretty handy to be able to enter the MIDI note number instead (or in addition to the human readable form).

    Great work so far!

    ReplyDelete
  42. Awesome stuff, always love to see ideas like this become reality.

    I'd like to second (third?) the notion of changing your implementation to use SVG/VML instead of Canvas. As others have said, Canvas is inaccessible, is raster based (not vector) and JavaScript accessible only. You can use the Raphaël JavaScript library (http://raphaeljs.com) to render the SVG and it will auto-render it in VML for IE6/7/8 (IE9 will support SVG natively).

    SVG & VML actually create nodes in the DOM, just like HTML, which you can then attach to and manipulate with libraries like jQuery for endless flexibility. Also makes them visible to screen readers & search engines (assuming you save the generated content to a static resource that can be indexed of course).

    ReplyDelete
  43. Bangarang! I'd totally buy that off you, publish it.

    ReplyDelete
  44. This is great!

    I don't see a need to invent a new input format. Use MusicXML for greatest accessibility to the largest number of programs - more than 80 programs can write it out, including Finale, Sibelius, and MuseScore.

    If you want easy-to-type input, you can use ABC, but that can be tricky to parse - due both to the nature of the language and to its multiple dialects in common use. You might want to rely on the existing ABC to MusicXML converters instead, and just write one parser.

    It's an interesting suggestion above to serialize your internal format, but that doesn't seem to get you a lot of benefit for the time spent. If you read in a standard format, nobody else will have to write a new converter to use this.

    Keep up the excellent work!

    ReplyDelete
  45. There's a JS error with Opera (10.53).

    ReplyDelete
  46. Oh this is AWESOME .. I love it!! Go HTML5

    ReplyDelete
  47. SO AWESOME. Keep up the good work!

    ReplyDelete
  48. This is really one of the coolest usages of the HTML5 canvas API. Just some remarks from me to how your idea could spread:

    * You should put the code on GitHub, SourceForge or Google code. The earlier the better.

    * Then, as suggested by others, look at Lilypond. That is, for three reasons: a) they have a nice input format, powerful but easy IMHO, (looking quite similar to your initial idea) and b) they feature SVG export, which is interesting, too, when making music for the web. And c) they have an awful rendering engine producing beautiful sheets.

    * Talk to the Lilypond team, search for synergy effects and helpers for your code (Open Sourcing, as suggested, helps, too).

    ReplyDelete
  49. This sounds like very good project. Keep up the effort!
    Having never properly learned notes myself, but occasionally struggling with them, I love the idea of being able to display notes as Guitar tabs. Please consider adding Ukulele-support :)

    ReplyDelete
  50. Beautiful notation, Mohit!

    I had a need to have a simple music notation that could be quickly typed from a printed score into a web form and then packaged and transmitted within a URL to a music editing service.

    Musical objects notated using the small language I developed I call Tunetexts.

    Harmony examples can be notated especially quickly using this Tunetext language because notation for chord sequences can be generated by specifying only the chord root and type of chords and duration changes within a chord progression.

    A Tunetext server can generate voicings for chords if you don't care to specify them yourself.

    If you are doing an example in 4/4 meter, the default duration assumed when a specification starts is assumed to be whole note, so a sequence of whole note chords need only be listed to be performed.

    It took about thirty seconds to produce this harmony example, by typing the chord names, specifying the changes of duration that occur and submitting the tunetext URL to the server:

    Chords in the key of C Major

    The Tunetext Service that will respond to this will return the notation for the score and prepare a MIDI performance of it in a second or two, and present it in a form that provides links that will generate the HTML necessary to present this music on a website in a number of useful ways.

    Here is that tunetext URL packaged into a clickable button.

    Here is a score animation generated from the tunetext specification a few seconds after it was submitted to a Score Animation Service that runs on the SongTrellis site.

    When it's necessary, the pitches used in a particular chord voicing can be completely specified.

    Here's a score consisting of a melody voice and a chord accompaniment.

    ReplyDelete
  51. Very nice! The accidentals should be bigger.

    ReplyDelete
  52. I don't know a damn thing about music but your stuff looks beautiful. Please forge on!

    ReplyDelete
  53. Very awesome. Like many commenting here I had previously made a start at the same thing, but now I'm not going to bother. Looking forward to being able to develop alongside this

    ReplyDelete
  54. Great job with this!

    I second (or third, or fourth...) the votes for ABC compatibility; many of us have libraries of music we've created with ABC markup!

    Thanks for sharing!!

    John

    ReplyDelete
  55. Thanks for all the suggestions, folks. I've answered most of your questions here: A Question of Formats.

    ReplyDelete
  56. Consider the MVC software architecture. You can support two views: canvas and SVG. You can support multiple models: JSON, ABC, whatever.

    ReplyDelete
  57. Wow, I've worked on doing almost exactly this same thing. I just haven't gotten very far on it due to lack of time. I guess it's one less thing to worry about since you're clearly much further along. :)

    ABC notation is nice, although it's true that it doesn't directly support tab. You can always derive tab from standard notation, of course, but the generated fingerings might not be possible or accurate without some work. In particular, I've found the ABCPlus document detailed and easy to read.

    ReplyDelete
  58. Very nice!

    Noticed a bug: On iPad, the tab notation is being drawn in the wrong spot. Take a look at http://imgur.com/AxmbM.png for a screenshot. If i reload the demo page, the tab notation is drawn correctly, it's only wrong on the first load.

    ReplyDelete
  59. The amount of systems and websites that could arise from this library are endless.

    Great job!

    ReplyDelete
  60. Regarding printing and by possible extension svg, this may help:

    http://code.google.com/p/canvas-svg/

    ReplyDelete
  61. Amazing - it is like LaTeX for the web. any plans on adding support for different clefs?

    Michael

    ReplyDelete
  62. Congratulations on creating this beautiful demo, this is going to be very useful to many people.

    I would like to put an other vote in for the use of MusicXML — as others have stated, it's a widely supported format. There are many applications which can import MIDI, ABC Music, MusiXTeX, LilyPond, ect files and export that into MusicXML... it would be extremely useful to have this done on the server-side (I'm not sure whether there are packages that would be easy to setup already available). Canorus seems to have good libraries: http://freshmeat.net/projects/canorus

    Best of luck on this project. Don't let it overwhelm you! I've worked on a JavaMIDI and JavascriptMIDI plugin, let me know whether you would like to plug one of those in (to generate music in real-time).

    ReplyDelete
  63. I'd suggest you use a neutral musical notation like humdrum:

    http://www.musiccog.ohio-state.edu/Humdrum/

    that you can easily use to convert to and from other formats.

    The notation looks great. Good work!

    ReplyDelete
  64. There are already a bazillion music notation formats -- please use an established one! ABC is a very good candidate of course. And if there are something lacking from the notation please help improve it instead of creating your own. Converting between notation formats is a very big headache and can be impossible to do exactly.

    ReplyDelete
  65. Here's a similar project :
    www.tabnet.fr

    ReplyDelete
  66. Very cool. I love music programs, and this should be great for the composers out there.

    ReplyDelete
  67. Too bad that in the oh-so-futuristic usage of this you use the center tag :)

    ReplyDelete
  68. I like the guitar tab---except I don't think I can stretch far enough to play on the 2nd and 12th frets at the same time!

    ReplyDelete
  69. @Octafish you could use a capo on 2nd and finger bar on 12

    No need for MIDI, go for OGG/MP3 samples (just a thought), which are supported by HTML5.

    Fantastic idea, by the way!
    Best of luck with making it fully functional!

    ReplyDelete
  70. What a fantastic idea! I like that a lot. And writing a nice API for people to hook into would be awesome, and could revolutionise the way we look at musical notation on the web!

    ReplyDelete
  71. That's really great.
    Looking forward to the final version!

    ReplyDelete
  72. Very interesting, we're looking for the final version! :D

    ReplyDelete
  73. This is something that would help me out a lot. I'll keep checking back for updates.

    ReplyDelete
  74. Love this idea and this is definitely one of the most elegant implementations of this kind of thing that I've ever seen. Also a great use of new tech - seriously looking forward to the first shippable version.

    ReplyDelete
  75. This must be SVG. Imagine editing capabilities with drag and drop or clicking on a note. Most importantly, it's vector and not pixels.

    ReplyDelete
  76. It's sad, I would like to copy the music with copy and paste. :(

    ReplyDelete
  77. Well, not just copy but also listen it with a kind of MIDI player!

    ReplyDelete
  78. Would love to see an open source version of the engine. BSD, MIT, or LGPL would also allow it to be used commercially. I would imagine there are great business opportunities in the territory of web-based score editing -- with collaboration capabilities.

    ReplyDelete
  79. In example 2 the fifth semiquaver f needs a natural or the last semiquaver f needs its sharp suppressed or the fifth semiquaver f needs a sharp or the last semiquaver f needs its sharp in brackets (#)

    This gets still more complicated when voice 2 accidentals "collide" with voice 1 accidentals.

    Have you looked at basing this on lilypond scores?

    Tim.

    ReplyDelete
  80. Very cool, good use of a new technology and very useful, I like it, keep up the good work

    ReplyDelete
  81. Another vote for MusicXML parsing... This is used but most (if not all) of the main scoring software.

    ReplyDelete
  82. My hat is off to you brother!!! Keep up the good work.

    ReplyDelete
  83. as previously stated, it's not working in opera :(

    might of course be opera's fault though...

    ReplyDelete
  84. Echoing what someone else said, you should look at ABC notation. It is similar to your example.

    ReplyDelete
  85. Check out www.jfugue.org

    ReplyDelete
  86. This is fantastic, I love seeing technology being put to uses like this :-)

    ReplyDelete
  87. I had been kicking around a way to do this with CSS, but damned if you didn't nail it with this method! Here's hoping this sees wide adoption.

    ReplyDelete
  88. Great idea, I love the human readable entry, as someone who loves to generate music internal stuff with scripts. I never did appreciate having to work around bugs by hacking .mscx files. Hope to use this!

    ReplyDelete
  89. Brilliant!

    This is an idea that I had when I first saw www.noteflight.com.

    Interested in making this into an open source collaborative effort?

    ReplyDelete
  90. HTML 5 FTW!!!

    This is excellent work .. keep it up.

    ReplyDelete
  91. While automatically generating the spacing for a bar is nice, it can result in music that is still difficult to read. It is necessary to allow everything to be shifted around the canvas, to adjust how slurs curve, etc. It can make a huge difference in readability as well as how the music itself is played.

    I'm sure this will all come in time. This is a fantastic start and I am very impressed!

    Several others have mentioned MIDI. Probably not possible with just JavaScript, but it should be relatively easy to toss all the data to a back end somewhere that would convert it, no?

    ReplyDelete
  92. This is cool, but I don't know if it's the example or the api rendering, but point 5 and 6 on the guitar tab arn't really playable.

    Fret 2 to 12 or 5 to 23 isn't really feasable.

    ReplyDelete
  93. This is really great! I would reinforce the suggestion on ABC (I'm part of the ABC community :)). I'm also working on an extension of the "musicpad notation" that is much simpler to parse than ABC I'd love to integrate it with what you've done here!

    Remo.D.

    ReplyDelete
  94. I don't see if anyone suggested this yet, but you don't really need to implement tablature: there is a typical fingering notation used for classical guitar which is more effective and is compatible with most notation software (since it just involves extra markings for general hand position based on index-finger-fret, and what fingers are used for what note).

    ReplyDelete
  95. Great work! I'd love to see a version of something like for the Nashville # system.

    ReplyDelete
  96. You've been recently posted on Slashdot. Expect your blog to be hammered with traffic shortly ;)

    ReplyDelete
  97. This is really cool! Looking forward to see a interactive html5 based music score app that allows collaboration, editing and sharing. It would be nice if we have a library of all music scores, and a search engine upon that would be greatly useful. Then people may also do things like get similar music scores etc...

    ReplyDelete
  98. Man!!! I'm very profficient in lilypond ( just the typing not the developing and I know some javascript,... if I can help I'd be glad ) I've been looking for something like this for years,... currently my m.o. is to compose in lilypond export the pdf and the midi and feed the midi to timidity or csound depending on the situation,... so well anyway anything I can do just let me know

    ReplyDelete
  99. +1 for MusicXML and the often release cycle!

    ReplyDelete
  100. Great! IMHO MusicXML is awfully verbose, but perhaps ABC notation is a way to go. However, JSON is very easy to consume -- maybe some server side tools that can 'compile' ABC or MusicXML to your JSON format.
    Any plans as far as playback? Persisting scores on your server? more?

    ReplyDelete
  101. Music XML is great and SEO friendly. Being able to search (google) for music and see it is a good idea.

    ReplyDelete
  102. Do you have the natural symbol? In example 6 third group of notes, the bass note should have a natural symbol in front of it based on the change in the tab. (Also the tab for the bass line should be 3, 4, 5 not 4, 5, 6 unless you always tune your guitar down a semi-tone normally.)

    ReplyDelete
  103. Wow!

    I'm totally impressed!

    Keep up the great work!

    L

    ReplyDelete
  104. Cranky Old Dude12:43 PM, May 14, 2010

    Is there anyway you can proportionately make the accidentals significantly larger? If you are playing an instrument where you can't close to the page, for example double bass, percussion or tuba, it is an issue. In example four, the ties on the lower voice should curl down (above the beams, but curled down) Ties in the upper voice would curve up. In a two voice texture, slurs, as opposed to ties, will be on the outside of the stems. Also, and this is just a personal taste thing, the stems on the 32nd notes should be longer unless they interfere with other notation.
    You might want to look at a book like Gardner Read's or Curt Stone's.

    ReplyDelete
  105. This looks like a great idea, looking forward to seeing progress on this project!

    ReplyDelete
  106. For designing the music notation language, you might want to take a look at OMeta: http://tinlizzie.org/ometa/

    ReplyDelete
  107. The demo images at http://0xfe.muthanna.com/jsnotation/demo.html are really quite stunning. Nice work!

    ReplyDelete
  108. Cool idea, great work. You prove that combining two well known concepts can generate something new

    ReplyDelete
  109. nice. Some years back, I wrote a Perl-based form-to-midi converter which took input in the format of note-[modifier-]-octave (i.e. "c#4 d4 e-4" for c#, d natural and e-flat, all in the fourth octave) and made a string of notes out of it. No timing included. But combined with this and maybe a drag and drop interface, I could rule the world!

    ReplyDelete
  110. Excellent - maybe take a look at using Lilypond (http://lilypond.org/) as the base for a musical source code (or support a Lilypond subset itself). Also, how about other stringed instruments (from a Ukulele player)?

    ReplyDelete
  111. The demo scores rendered cleanly in my copy of FF 3.6.3 (Win server 2003), but the html code seemed to claim otherwise:

    [h2]Test 1[/h2]
    [canvas id="notation" width="800" height="400"
    style="background: #eed; padding: 10px; border: 10px solid #ddc"]
    HTML5 Canvas not supported on this browser.
    [/canvas]

    ReplyDelete
  112. This is great! I will be watching closely for a release...

    ReplyDelete
  113. Amazing. I'm drooling! Anxious to see which license you chose for the code, and whether I'll soon be able to contribute via github.

    Really want to use it to replace lilypond (currently use it with my homegrown marching percussion composition tools). Seems like I'll actually be able to understand your projects code, and thus, contribute!

    ReplyDelete
  114. Perhaps you might be able to combine your JS API with some PHP to create an in-browser score editor with support for exporting LilyPond files. It would be much appreciated.

    ReplyDelete
  115. would really like to see a connection to a way to play that score ..

    ReplyDelete
  116. You might want to look at SVG web (http://code.google.com/p/svgweb/). They're quite stable, we're using them in production.
    I've implemented some pretty complex charts for Canvas, but since I've learned about SVG web, I've done everything with SVG, that's the way to go!

    ReplyDelete
  117. this is great, keep the good work. i might utilize this on a site. it's important for it to work with the MusicXML standard.

    ReplyDelete
  118. Hi,

    Great job! Very interesting to anyone with any music background at all.

    Are you considering using a music keyboard for I/O instead of programming notation input to result in a score?

    I've always wanted to be able to plug a keyboard into a computer and see the music score appear from what I improvise.

    JR

    ReplyDelete
  119. 0xfe, where does one learn how to draw like that?! Bet that treble clef was a mission! Beautiful js code.

    ReplyDelete
  120. This is great! Hope this grows.

    ReplyDelete
  121. You might want to have a look on a SVG renderer tool we developed within the DIMUSED project:

    http://www.dimused.uni-tuebingen.de/hildegard/?isForm=1&FILE=1&source=D&VARIANT=1&L=1


    This is a rather special case of rendering medieval music with neumes, but uses the open format of the Music Encoding Initiative (MEI) as its data base and shows some of the potentials of SVG's interactivity for rendering variant readings in other sources by mouse over.

    Stefan

    ReplyDelete
  122. Serendipity --- on another list about a cross browser SVG library (named Raphael) someone just posted about
    Abcjs, which is an open source parsing and rendering tool for ABC written
    entirely in javascript and allows sheet music to be rendered as both
    standard notation and MIDI entirely with the browser. There is a working Demo (with sound) here...

    http://drawthedots.com/

    ReplyDelete
  123. So hurry up and make it a product already :-)

    ReplyDelete
  124. Take a look on the tracker notation used in Amiga music trackers and nowadays still found in Renoise (www.renoise.com) and MadTracker:

    Cmin chord: C-4 D#-4 G-4 (where "4" is the octave)

    Tempo 4/2 beat:

    C-4 D#-4 G-4
    . . .
    D-4 F-4
    . .
    C-4 D#-4 G-4
    . . .
    D-4 F-4
    (and so on)

    Basically you just need to read it like a spreadsheet, playing one line after another. For faster notes, just add some "off" sign in order to know when the note needs to be stopped:

    C-4 C-5
    . .
    . .
    off off
    .
    D-4 F-4
    . .
    . .
    . off
    . .
    off .

    And so on.

    ReplyDelete
  125. More on tracker based notation:
    http://youtu.be/9gwwwRBDuYE

    ReplyDelete
  126. +1 for MusicXML. You can use it as an intermedia language, if you prefer to write it in another style. Also somebody can easily write an editor, using your code.

    You did a great job!

    ReplyDelete
  127. Let me suggest that you have a look at ABC Plus, http://abcplus.sourceforge.net/.

    It's a de facto standard extension to the ABC notation language; the abcm2ps typesetter (http://moinejf.free.fr/) also supports tablatures. I'll be glad to give you support if you decide to implement it.

    Regards, Guido

    ReplyDelete
  128. +another for music XML as allot of people who use any type of standard notation software like Sibelius but want to render without any plugins can export music XML straight from the app.

    Looks great though keep up the GREAT WORK!

    ReplyDelete
  129. Great stuff!

    A lot of people are mentioning ABC, MusicXML, and LilyPond. You might also want to look at the notation that JFugue uses.

    JFugue is a Java-based API for creating music. Its notation was inspired by the Commodore 128's BASIC v7.0. Intended to be easy to learn and use, JFugue focuses on the creation of music as opposed to specific notational elements, but it does closely resemble what you proposed in your sample score script.

    ReplyDelete
  130. This comment has been removed by the author.

    ReplyDelete
  131. Please for the love of God make the code look like anything EXCEPT MusicXML. MusicXML is an abomination. It's a relic of those ignorant, heady days when XML was The Future Of Everything.

    Music notation could not be any less suited to XML. Whatever you do, please steer clear of it.

    ReplyDelete
  132. This is awesome! I tried to do something like this for a project some time ago and lost interest. I'll have to check this out.

    As for musicxml being horrible, I completely agree. But it *is* a more or less established standard. So I think supporting it would be a good idea.

    ReplyDelete
  133. One more thing, would you mind putting it on github or something similar. That would make hacking a lot easier. ;)

    ReplyDelete
  134. @75th Trombone

    Why do you think about MusicXML this way? In what view is it an abomination?

    ReplyDelete
  135. This is fantastic Mohit, good luck taking it forward (and I second all the suggestions you should open this up as a project on github or similar).

    jTab (http://jtab.tardate.com) is a project I launched last year in a similar vein - although I was particularly focused on guitar tab (and solving the fingering problems that @Octafish mentioned).

    At the time, I chose SVG rendering (with Raphael) but have been thinking about a canvas option or port (Raphael/SVG works pretty much everywhere except Google's Android webkit variant!)

    ReplyDelete
  136. That's very cool. You know, if you decide to make this library available, i could help you turn it into a Google Docs web based editor. See the following projects:
    http://code.google.com/p/gdbe
    http://code.google.com/p/latex-lab/

    ReplyDelete
  137. Keep up the good work Mohit.

    ReplyDelete
  138. Miraculous effort! It would be even better if it would be SVG instead of Canvas. I strongly recommend considering switching to it.

    ReplyDelete
  139. The link above is a dead link. I'll get an error 404. Can you fix it? Thanks.

    ReplyDelete
  140. Link's dead. Have used NoteFlight on desktop. Curious for something that will work enough on Android to notate ideas on the fly -- at least to jot down phrazes when I need to not lose an idea ...

    ReplyDelete
  141. @StrictVegan try Tabdroid, based on TuxGuitar

    ReplyDelete
  142. Hi Mohit,

    I just tried to look at your demo and got a 404 message. Are you still working on this? What about making this an open source project?

    All the best,

    -Joe

    ReplyDelete
  143. Hi again, Mohit and others,

    I am guessing you have replaced this effort with your open source "VexFlow" project [http://vexflow.com/]. Am I right?

    If so you might want to point to that from this posting.

    All the best,

    Joe

    ReplyDelete
  144. I've played with jfugue and you can drive it from javascript through a java applet ..<60 lines of code!. You can push MusicXML into it, or its own notation.

    ReplyDelete
    Replies
    1. unfortunately applets are not supported anymore :)

      Delete
  145. I couldn't link to the demo for some reason.

    Am thinking about writing conversion to (eventually from) another music notation system in a text format (supports playback & midi export), but haven't written a parsing program in over 17 years.

    WBP

    ReplyDelete
  146. any change of choosing number of string .. as in 4 lines for mandolin?

    ReplyDelete
  147. Is it possible to play music made with vexflow?
    For example here is something I made with nted
    http://vimeo.com/16894001

    Note nted is both the editor and the player for it.

    It would be great if this could be done entirely in the browser

    ReplyDelete
  148. A very nice implementation of Music Notes in javascript. I hope to hear more from the developers of this project!

    I'd like to implement on my music blog here: http://readmusic.org

    Many thanks

    ReplyDelete
  149. I have a converter from abc to NoteWorthy Composer in this link. Near the bottom of the page are links to a viewer and a desktop tool to first convert the page's output, then display and play it.

    http://home.comcast.net/~wporter211/realsite/abcnwc.htm

    ReplyDelete
  150. argh, u did it. but the demo link seems broken

    ReplyDelete
  151. here's another MusicXML vote. though verbose, it preserves both how the music should look on paper AND how the music should sound when computer generated (a la MIDI). If your aim is to just display notation, then maybe ABC is better, especially if the user is just dragging notes from a web interface. But it seems like there'd be a lot of value in taking music from a desktop app (Sibelius, Finale, etc) and displaying it as sheet music online without plugins. your plugin would fill this function best with MusicXML due to widescale support.

    ReplyDelete
  152. There is currently no governing standard for the use of JSON as a music exchange format. The only safe way is to convert from existing MusicXML (for which there IS both a "standard" and very widespread tool support) to JSON. Anything else would at the moment be a disservice to the music community.

    ABC is -except as widely used by folk musicians (and in which it excels) for recalling a tune's melody line- next to useless as an exchange format.

    ReplyDelete
  153. I love the lilypond-like syntax for describing scores.

    Would it be reasonable to re-work http://git.savannah.gnu.org/gitweb/?p=lilypond.git;a=blob;f=lily/lexer.ll;h=2ef59f43f5243618951de8eb6d4c0ea90b23b03f;hb=HEAD using jison or some other JS/CC or something?

    Perhaps such an approach would enable a convert-ly to automatically update existing scores?

    An important attribute for a such a language is "scribbability," or the ease in setting up a minimal working file. XML fails on scribbability, although it would be fantastic to see something similar to the way the semantic working group developed N3, a scribbable notation for RDF XML.

    ReplyDelete
  154. Just thought it's worth noting the link to the demo is broken, and it took some detective work for me to link this excellent work to the result - Vexflow. Wonder if you could update the post to point to Vexflow explicitly.

    I'll probably be using this as part of a product (open source hardware) designed to teach people piano.

    Cefn
    http://cefn.com

    ReplyDelete
  155. How can I make the other side of this html5 canvas diamond?
    html canvas

    ReplyDelete