guitar

JavaScript Guitar

Project maintained by ronyeh

Guitar + JavaScript

This tutorial shows how to create a guitar in JavaScript. All code on this page is MIT licensed. The source code can be found here. Here is a basic demo of what we will build together. It will eventually look similar to the image below:

Telecaster

Audio

First, we will need to play individual notes from our virtual guitar. We can use a JS library for this. Here are two that are easy to use:

Synthesizing a guitar string is an advanced topic for another day. For now, we will use audio sampled from a real guitar. Our sample files were recorded from a Fender Telecaster.

// TODO
alert('Hello World');

Graphics

Let’s make some graphics for our guitar. We will can use SVG to draw shapes for the body and neck of the guitar. If you want to skip this step, feel free to download this JPEG to use as a background image for your guitar.

// TODO
alert('Hello World');

Interaction

Now we need to support user interaction with the guitar. We can do this by detecting mouse and keyboard events (or touch events on a mobile device).

// TODO
alert('Hello World');

See

More Resources