Create Dim, Min, Maj, & Aug music chords with HTML5 & jQuery | Hacker News Reader

Create Dim, Min, Maj, & Aug music chords with HTML5 & jQuery

audiofile.cc

19 pointscgcardona19 comments

If I were going to start a project to map elements of a musical score to HTML5 custom attributes, I would probably start with something like Lilypond, which has a convenient formal specification:

http://lilypond.org/doc/v2.12/Documentation/user/lilypond/in...

Yes, someone else from the WHATWG mentioned lilypond. I intend to look into it. Thanks for the suggestion.

No problem, and good luck. I started a number of music-language projects that rarely made much progress, usually because I got frustrated after recognizing my design had some fundamental flaw that made it particularly hard to express something important. In retrospect, if I had known about Lilypond I'd have started there.

Yes, I can see that checking out Lilypond is in my future. ;-]

Given that all of the graphic elements needed exist as Unicode, and that there exists code to detect specific fonts on the viewers machine, I'd like to see them used as the default rather than the somewhat sketchy drawings as shown. Just a suggestion...

Great suggestion. I'll look into it. Thanks.

I just got home from lunch and have already implemented a new bass clef with unicode characters. This was an absolutely great idea! Thanks!!! :-D

Check out vextab/vexflow, no need to re-invent the wheel. It's a complete (and open source) framework for music/tab notation:

http://vextab.com/

I've not seen this before. Very cool! Thanks for bringing it to my attention.

Hey @cgcardona, this is really cool, but the 'fork me on github' tag in the corner doesn't really work well on Webkit browsers.

With the latest chrome, you can't see "fork me on github" - only "cause i rock" backwards - this is a known bug with reverse css but is easy to work around.

In Safari v5, you can see 'fork me on github' but it disappears on mouseover.

Very cool demo though.

@tjarratt, Thanks! Yeah the corner github tag is looking pretty bad in FF also. I guess I need to redesign that.

I can't get it to work - none of the examples in fact. I'm running Chrome Mac Dev Channel (v13.0.782.4). Clicking any of the buttons causes nothing to happen whatsoever.

One error is shown, when a button is DOUBLE-clicked (does not appear on single click), in the output console: "Error in event handler for 'undefined': Error: INDEX_SIZE_ERR: DOM Exception 1"

I've seen it work in FF4, Chrome 12, Opera 11.11, Safari 5, Android 2.2, iPad and iPod touch but I've not tested it in Chrome 13. I guess I should :-/

Thanks for the bug report. Much appreciated.

Quite cool, but having a "play" button seems like a must for a site like that.

Agreed 100%. play(), pause(), stop(), and a whole suite of functions are in the works. ;-]

Please post an update (or link to a blog post or something) when you do add this. It would be great to see that functionality working.

Confirmed.

You forgot to account for the ledger line for middle C.

Initially I had the middle C line showing up all the time but that is incorrect and made the music had to read. My intention is to make the middle C ledger intelligent enough to only show up when a note is sitting directly on it.

Reply on news.ycombinator.com