4 ms·

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

19 points by cgcardona 15y ago

hsmyers 15y ago
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...
- cgcardona 15y ago
  Great suggestion. I'll look into it. Thanks.
- cgcardona 15y ago
  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
Goladus 15y ago
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/index.html http://lilypond.org/doc/v2.12/Documentation/user/lilypond/in...
- cgcardona 15y ago
  Yes, someone else from the WHATWG mentioned lilypond. I intend to look into it. Thanks for the suggestion.
  - Goladus 15y ago
    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.
    - cgcardona 15y ago
      Yes, I can see that checking out Lilypond is in my future. ;-]
owyn 15y ago
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/ http://vextab.com/
- cgcardona 15y ago
  I've not seen this before. Very cool! Thanks for bringing it to my attention.
redthrowaway 15y ago
Quite cool, but having a "play" button seems like a must for a site like that.
- cgcardona 15y ago
  Agreed 100%. play(), pause(), stop(), and a whole suite of functions are in the works. ;-]
  - tjarratt 15y ago
    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.
    - cgcardona 15y ago
      Confirmed.
Bud 15y ago
You forgot to account for the ledger line for middle C.
- cgcardona 15y ago
  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.
JackWebbHeller 15y ago
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"
- cgcardona 15y ago
  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.
tjarratt 15y ago
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.
- cgcardona 15y ago
  @tjarratt, Thanks! Yeah the corner github tag is looking pretty bad in FF also. I guess I need to redesign that.

19 points by cgcardona 15y ago

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

cgcardona 15y ago
Great suggestion. I'll look into it. Thanks.
cgcardona 15y ago
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

Goladus 15y ago

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/index.html http://lilypond.org/doc/v2.12/Documentation/user/lilypond/in...

cgcardona 15y ago
Yes, someone else from the WHATWG mentioned lilypond. I intend to look into it. Thanks for the suggestion.
- Goladus 15y ago
  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.
  - cgcardona 15y ago
    Yes, I can see that checking out Lilypond is in my future. ;-]

owyn 15y ago

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/ http://vextab.com/

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

redthrowaway 15y ago

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

cgcardona 15y ago
Agreed 100%. play(), pause(), stop(), and a whole suite of functions are in the works. ;-]
- tjarratt 15y ago
  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.
  - cgcardona 15y ago
    Confirmed.

Bud 15y ago

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

cgcardona 15y ago
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.

JackWebbHeller 15y ago

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"

cgcardona 15y ago
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.

tjarratt 15y ago

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.

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