This project is an interactive guitar chord player built with React and TypeScript. Users can select notes and chords, and the application plays the corresponding sound using the Web Audio API. The project consists of several components and utility classes that handle the selection and playing of guitar chords.
The application is hosted on GitHub Pages and can be accessed here.
NoteSelector.tsx
: A functional React component that displays a list of selectable notes. When a note is selected, the component calls a callback function with the selected note as its argument.ChordSelector.tsx
: A functional React component that displays a list of selectable chords based on the selected note. When a chord is selected, the component calls a callback function with the selected chord as its argument.Player.ts
: A class that handles playing chords on a virtual guitar using the Web Audio API. The class initializes an instance of theWebAudioFontPlayer
and sets up the audio context and output. It has methods to play and cancel chords.
ChordShape
: Represents the shape of a chord on the guitar fretboard, including the finger positions on each string and any barre (if applicable).Chord
: Represents a chord with its key, name, and an array ofChordShape
objects.ChordBook
: A class that holds an array ofChord
objects and provides methods to retrieve chords by their key.getChords
: An asynchronous function that returns aPromise
resolving to aChordData
object containing the chord data.
- Clone the repository.
- Install the required dependencies by running
npm install
. - Start the development server by running
npm run start
. - Open your browser and visit
http://localhost:8080/
to access the application. - Select a note and a chord to hear the corresponding sound.
- Clone the repository.
- Install the required dependencies by running
npm install
. - Build the project by running
npm run build
. - The build files will be located in the
dist
folder.
You can customize the list of available chords by modifying the ChordBook.json
file. The JSON structure should follow the ChordData
interface, with keys representing the chord keys and values being objects containing chord names and arrays of ChordShapeData
objects.
This project is available under the ISC License. Feel free to use, modify, and distribute the code as needed.