Add classes on notes to allow easier styling and manipulation

[cheap-glitch]

Description

It would be incredibly useful to be able to select all the notes on a tablature with a simple $('.alphaTab-note'), e.g. to add some event listener. Even better, every note could have several classes, a common one (e.g.alphaTab-note) and others associated with its position or value (e.g alphaTab-note--14th-fret, alphaTab-note--1-6-2 for the 2nd note of the 6th beat on the 1st bar).

Possible Solutions

Current Workarounds

None that aren't very hackish.

[Danielku15]

Can you elaborate the actual use case behind this request? Why do you want to style or select individual notes specifically?

To detect whether certain elements were clicked, the BoundsLookup generated during rendering might be the better choice. This lookup allows to "query" for a given location what element is located there.

This feature request would cause multiple problems:

• It is web and SVG only. AlphaTab also supports other renderers which makes the feature quite specific.
• It would cause heavy performance issues in browsers. Having so many SVG elements with that many individual classes bloats up the DOM.
• The final music sheet does not directly have a SVG dom hierarchy that reflects the music notation hierarchy. A single note might consist of multiple glyphs within the SVG that are DOM-wise scattered across various nodes.

[cheap-glitch]

Why do you want to style or select individual notes specifically?

My idea is to be able to show visually which notes belong to a specific scale, or to highlight a particular note based on its pitch and position in a scale. It could also be used to emphasize a specific pattern, provide visual cues, etc.

It would cause heavy performance issues in browsers. Having so many SVG elements with that many individual classes bloats up the DOM.

Would that be the case even for very short tabs (e.g. two or three bars) ?

In any case, I'm aware this is a pretty specific request, tying into an even more specific usage of alphaTab. In the end, what I want to do is to select & style individual notes based on their properties (position in the score, pitch, etc). It seemed to me that adding classes to the SVG elements would be the simplest way to allow that, but I guess I was wrong.

[Danielku15]

My idea is to be able to show visually which notes belong to a specific scale, or to highlight a particular note based on its pitch and position in a scale. It could also be used to emphasize a specific pattern, provide visual cues, etc.

Could you create a specific list of the elements you would like to have selectable and what properties of those would be important to know? The biggest problem is likely that there are some elements which consist of multiple parts and also some elements that are related to multiple notes. Just looking at a simple example shows that there is quite a complexity behind it:

The first beat has 2 notes. The dots belong to the individual notes, same for the note heads. The stem is shared between them. The bar belongs to the first and second beat.

On the second beat one note has an additional accidental that belongs to it.

There exists already a small grouping for the highlighting during playback. This is mainly on a beat-level not on individual note level.

From a styling perspective none of the modifications are likely considered during the layout process. Coloring is no problem, but most other CSS modifications will not work well.

I also see many potential issues on event listeners for interactivity. There are multiple elements in different places of the DOM that could relate to the same note (e.g. an accidental is somewhere else than the note head).

My idea is to be able to show visually which notes belong to a specific scale, or to highlight a particular note based on its pitch and position in a scale. It could also be used to emphasize a specific pattern, provide visual cues, etc.

Maybe a combination of the BoundsLookup and the raw data model are better to achieve this. There is already quite a bit possible today: After the score was loaded, you could traverse the data model and collect the beats/notes/voices etc. that you are interested into based on the semantic information of the score. The location of certain elements can then be loaded via the BoundsLookup for displaying adorners.

For interactivity you could generate overlays at the corresponding locations and attach mouse listeners to it.

Then only styling of the elements would be an open point. All notes and beats already have a unique id today. For beats is already a css class generated (for highlighting during playback), css classes for note ids I could also try to add.

Would that be the case even for very short tabs (e.g. two or three bars) ?

No, for short tabs it should not be an issue at all. I was thinking on the scale of full music sheets for a song.

[cheap-glitch]

Thank you for your detailed response!

Could you create a specific list of the elements you would like to have selectable and what properties of those would be important to know?

For now, I would like to be able to change the color of the note heads (and the corresponding number on the tablature) based on the musical note they are representing. This would allow, for example, to highlight the notes belonging to a particular scale.

Since it's much more restricted and precise than my initial request, should I open a new issue ?

[cheap-glitch]

Opened a more precise feature request : #291