search

paulrosen / abcjs

javascript for rendering abc music notation
Other
1.94k stars 285 forks source link

How to detect which note of the chord has been clicked? #695

Open ehsansh opened 3 years ago

ehsansh commented 3 years ago

I have a chord [ADF] . What is the best way to find which note the user has clicked?

paulrosen commented 3 years ago

I am working on a change that will make this easy - I have it in the dev branch now but wanted to test it a little more before releasing it. If you are using the min version of the library give this a try: https://github.com/paulrosen/abcjs/blob/dev/dist/abcjs-basic-min.js.

If you are using the npm version put this in your package.json:

"abcjs": "https://github.com/paulrosen/abcjs#39ac46cd30bc98daa0db0f0a9a65e5c9d5bdc2a8",

Then you'll see a lot more info in the clickHandler.

ehsansh commented 3 years ago

Thanks. It is great. I tested now and found a few issues.

  1. When I have for example a and I click on the note head sometimes the clickedName shows ledger instead of the note name.
  2. For white and whole notes when I click in the white area inside of the note clickedName shows undefined. I do appreciate if you solve these issues for the next release.
nbruley commented 3 years ago

Is there documentation on how to use click events for note clicks? I'd like to display the classes on the note that is clicked to speed up generating the CSS for the 835 tunes which need to be edited for second interval overlapped notes. Thanks!

paulrosen commented 3 years ago

Is this what you are looking for? https://paulrosen.github.io/abcjs/visual/click-listener.html#abcelem

nbruley commented 3 years ago

Yes!! Exactly. Thank you.