Absolute drawing of note after initial rendering

[rayrutjes]

Hi there,

I'm trying to see if I can render a note at current playback cursor position.

Is there a way to programatically do this? In what direction would you have me dig?

I guess this requires:

• Generating the note svg
• Getting the Y value somehow so I know where to place the note vertically on the page (between lines & in stave)
• Inserting the note in the svg dom & absolutely re-positioning the note on the x axis so it matches current cursor position

I looked a bit at the write but my knowledge of the internals makes me think some guidance would help me move in the right direction.

I've been thinking about a few hacks as well:

• Overlaying multiple rendered sheets and hide the svg stave from second sheet (but others reported that staves are not always aligned the same and anyway this feels a little dirty)
• Render all possible pitches once just to get the Y values per stave line, and then copy those. I fear this will get me into a lot of trouble though on playback. Feels very dirty as well.

Thanks a lot for your guidance.

[paulrosen]

I'm not exactly sure what you're trying to do. Do you want the staff to start out blank and as you play back the notes appear one at a time? Or have one voice rendered like normal but add a second voice as you go along? Do you want to modify the existing note (for instance, turn it blue when it is played?)

No matter what you are doing, the first thing is to add classes like this: abcjs.renderAbc(el, abc, { add_classes: true }. Then you can query for the note you want and that gives you a lot of flexibility.

I'm guessing you are already getting a callback like in this demo https://paulrosen.github.io/abcjs/examples/play-on-repeat.html The eventCallback will tell you what element is being played.

If you want to add new noteheads you can take a current notehead (find one with the class abcjs-notehead) and copy the path to a new element. You need to just modify the the first two numbers in the path to place that somewhere else.

To know where: you have the X-coordinate of the current element already. To get the Y-coordinate, add or subtract 3.875 for each vertical position from the current note.

If I didn't answer your question, please clarify.