Let's build a guitar! Well, ok, not a physical guitar, but the next best thing: A digital one! Excited? Alright! Just like a good rock show, might ...
For further actions, you may consider blocking this person and/or reporting abuse
Reading that makes me wanna grab my guitar 😁
Anyway really cool project !
Glad you liked it! 😃 I miss concerts to be honest.
Same here
Stuff like this blows my mind. There's no end to creativity. Loved the idea
Thank you very much! I originally wanted to build this as an Easter egg for a website but thought that it's way too awesome not to share 😁
change the cursor to a pick on hover...It would be more awesome
And done, thank you for the suggestion. Really adds to the whole experience!
Awesome idea! I'll do this later today and edit the post, thank you very much!
Huge! 🤘
Never thought about something like that. That could be a good base for a webapp that plays music and displays notes at the same time.
Oh, that would be amazing to learn instruments! I was starting to think about a remote band simulator where a user can play an instrument (guitar, keyboard, drums, bass, etc.) and the other "players" can hear what everyone else is playing :D
Haha yeah, or even an online/improved "Band Hero". Lot of good ideas can emerge from this project of yours. 😀
That's a brilliant idea, actually! I think the next step could be to add a second instrument and connect two instances.
Amazing project
And I learned a lot through this 😅
Awesome to hear! Which part was most helpful to you?
Almost all of it, because I am a beginner and it is fascinating to learn what those commands are :grim:
I'm very glad this post was so helpful to you! It's important to keep learning, it keeps the brain fit and is fun. :)
Haha yess
That's a lot of event handlers. Why not use just one with a simple function on mouse x,y coordinates to resolve the fret?
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?
That is awesome!!!
How did you get the .mp3 notes though?
Glad you liked it! I downloaded an open source midi soundfont I found on Github: github.com/gleitz/midi-js-soundfonts.
Ah thanks! I had a loon but didn't get into the folders, just the README!
There's a myriad of instruments there, actually. I used to write some music ages ago with a tool called Guitar Pro. That tool uses midi to represent the notes. That's how I knew about midi fonts in the first place.
This was some real 🔥🔥🔥🔥🔥🔥🔥🔥🔥
So glad you liked it! :D
Next project: Mobile support :)
That's a bit tricky, actually!
touchstartandtouchendcan be used to replace theclick,mousedownandmouseupevents on mobile, but there's no equivalent ofmouseoverfor touch events. But I could trytouchemove, that might work. Got any other idea how to solve this?I guess
touchmoveis the only option you got here. Since you already havex,y,widthandheighton your strings you can map thexandyof your touchmove event to the appropriate area. The simplest approach would be to select all areas and filter(maybe double check that y condition if y is not 0 on the top left ;), also maybe double check the borders and substitute
<=with<or>=with>)This could also be used to replace all the click handlers on all the rects and improve performance a bit on slower devices, too! I'll definitely do that in the second version of this.
How to sound open strings?
If by "open" you mean without holding any of the frets (I'm not really an expert in those terms) , they can be played right next to the head of the guitar. Does that answer your question? 🙂
Hi Pascal, yes I do mean without any frets pressed is an open string.
And yes, plucking the string between the machine and the nut does give the open note.
I'm very impressed! Have fun!
Thank you so much, I'm happy that you like it! 😄
haha that's cool!
Glad you liked it!
Nice job, looks like you had lots of fun doing this!
Being able to change the tuning of the strings would be an interesting addition.
Thank your very much! That's an interesting idea. I hardcoded the notes now so I have at least something halfway sensible, since I didn't want to overload it. But will definitely add it in a second version!
This is pretty cool!!
Thank you! Glad you like it :D
This is just awesome, thank you for this.
You're very welcome! I love to share my ideas and hope to inspire people by doing that :)
Millions of years from now, alien explorers who discover a working copy of this pen will think guitars were played by strumming the neck. :D
I love this.
LOL Good one! Well, if computers would allow for two cursors at once, it could be a bit more realistic :D
Just amazing
Thank you for your kind feedback!
Just Amazing