Passionate full stack web developer, course author for Educative, book author for Packt, he/him.
Find my work and get to know me on my Linktree: https://linktr.ee/thormeier
You're absolutely right! I wanted to go with the path of least resistance here, since it's basically a prototype and a lot of things still need some improvement.
Working with X/Y coordinates only is always a bit tedious, since some browsers handle some things differently (or even output different values for the same functions). Also, the SVG is scaling with the browser window, which is added complexity to the calculation. Using all these handlers just seemed like a simpler option code-wise to get it working for the time being.
I could imagine a mixture of the two approaches, though: Add the notes of the frets as data attributes (for example: data-note="E4"), add single event listeners for mouseover and click, determine the the fret (via elementFromPoint or similar), read out the note and play it. This would also solve the mobile/touch support mentioned in a another comment by Isitar.
What do you think?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
You're absolutely right! I wanted to go with the path of least resistance here, since it's basically a prototype and a lot of things still need some improvement.
Working with X/Y coordinates only is always a bit tedious, since some browsers handle some things differently (or even output different values for the same functions). Also, the SVG is scaling with the browser window, which is added complexity to the calculation. Using all these handlers just seemed like a simpler option code-wise to get it working for the time being.
I could imagine a mixture of the two approaches, though: Add the notes of the frets as data attributes (for example:
data-note="E4"), add single event listeners for mouseover and click, determine the the fret (viaelementFromPointor similar), read out the note and play it. This would also solve the mobile/touch support mentioned in a another comment by Isitar.What do you think?