DEV Community

Cover image for Let's build an actual working Guitar๐ŸŽธ with JavaScript ๐Ÿ’ป๐Ÿค˜

Let's build an actual working Guitar๐ŸŽธ with JavaScript ๐Ÿ’ป๐Ÿค˜

Pascal Thormeier on February 02, 2021

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 ...
Collapse
 
keisay profile image
Kevin Sengsay

Reading that makes me wanna grab my guitar ๐Ÿ˜
Anyway really cool project !

Collapse
 
thormeier profile image
Pascal Thormeier

Glad you liked it! ๐Ÿ˜ƒ I miss concerts to be honest.

Collapse
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

Same here

Collapse
 
monfernape profile image
Usman Khalil

Stuff like this blows my mind. There's no end to creativity. Loved the idea

Collapse
 
thormeier profile image
Pascal Thormeier

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 ๐Ÿ˜

Collapse
 
devgourav profile image
devgrv

change the cursor to a pick on hover...It would be more awesome

Collapse
 
thormeier profile image
Pascal Thormeier

And done, thank you for the suggestion. Really adds to the whole experience!

Collapse
 
thormeier profile image
Pascal Thormeier

Awesome idea! I'll do this later today and edit the post, thank you very much!

Collapse
 
laegel profile image
Laegel

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.

Collapse
 
thormeier profile image
Pascal Thormeier

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

Collapse
 
laegel profile image
Laegel

Haha yeah, or even an online/improved "Band Hero". Lot of good ideas can emerge from this project of yours. ๐Ÿ˜€

Thread Thread
 
thormeier profile image
Pascal Thormeier

That's a brilliant idea, actually! I think the next step could be to add a second instrument and connect two instances.

Collapse
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

Amazing project
And I learned a lot through this ๐Ÿ˜…

Collapse
 
thormeier profile image
Pascal Thormeier

Awesome to hear! Which part was most helpful to you?

Collapse
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

Almost all of it, because I am a beginner and it is fascinating to learn what those commands are :grim:

Thread Thread
 
thormeier profile image
Pascal Thormeier

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. :)

Thread Thread
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

Haha yess

Collapse
 
ashleyo profile image
Ashley Oliver

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?

Collapse
 
thormeier profile image
Pascal 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?

Collapse
 
victorigualada profile image
victorigualada

That is awesome!!!
How did you get the .mp3 notes though?

Collapse
 
thormeier profile image
Pascal Thormeier

Glad you liked it! I downloaded an open source midi soundfont I found on Github: github.com/gleitz/midi-js-soundfonts.

Collapse
 
victorigualada profile image
victorigualada

Ah thanks! I had a loon but didn't get into the folders, just the README!

Thread Thread
 
thormeier profile image
Pascal Thormeier

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.

Collapse
 
bharathkalyans profile image
Bharath Kalyan S

This was some real ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Collapse
 
thormeier profile image
Pascal Thormeier

So glad you liked it! :D

Collapse
 
isitar profile image
Isitar (Pascal Lรผscher)

Next project: Mobile support :)

Collapse
 
thormeier profile image
Pascal Thormeier

That's a bit tricky, actually! touchstart and touchend can be used to replace the click, mousedown and mouseup events on mobile, but there's no equivalent of mouseover for touch events. But I could try touchemove, that might work. Got any other idea how to solve this?

Collapse
 
isitar profile image
Isitar (Pascal Lรผscher) • Edited

I guess touchmove is the only option you got here. Since you already have x,y,width and height on your strings you can map the x and y of your touchmove event to the appropriate area. The simplest approach would be to select all areas and filter

const area = document.querySelectorAll('rect')
    .find(area => event.x >= area.x 
        && event.x <= area.x + area.width 
        && event.y >= area.y 
        && event.y <= area.y + area.height
    )

area.click();
Enter fullscreen mode Exit fullscreen mode

(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 > )

Thread Thread
 
thormeier profile image
Pascal Thormeier

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.

Collapse
 
paulserridge profile image
paulserridge

How to sound open strings?

Collapse
 
thormeier profile image
Pascal Thormeier

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? ๐Ÿ™‚

Collapse
 
paulserridge profile image
paulserridge

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!

Thread Thread
 
thormeier profile image
Pascal Thormeier

Thank you so much, I'm happy that you like it! ๐Ÿ˜„

Collapse
 
hexanal profile image
Fred

haha that's cool!

Collapse
 
thormeier profile image
Pascal Thormeier

Glad you liked it!

Collapse
 
kovacskri profile image
kovacskri

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.

Collapse
 
thormeier profile image
Pascal Thormeier

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!

Collapse
 
tawn33y profile image
Tony

This is pretty cool!!

Collapse
 
thormeier profile image
Pascal Thormeier

Thank you! Glad you like it :D

Collapse
 
fakorededamilola profile image
Fakorede Damilola

This is just awesome, thank you for this.

Collapse
 
thormeier profile image
Pascal Thormeier

You're very welcome! I love to share my ideas and hope to inspire people by doing that :)

Collapse
 
shikkaba profile image
Me

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.

Collapse
 
thormeier profile image
Pascal Thormeier

LOL Good one! Well, if computers would allow for two cursors at once, it could be a bit more realistic :D

Collapse
 
boypanjaitan16 profile image
Boy Panjaitan

Just amazing

Collapse
 
thormeier profile image
Pascal Thormeier

Thank you for your kind feedback!

Collapse
 
boypanjaitan16 profile image
Boy Panjaitan • Edited

Just Amazing