Skip to content

Generator for generating chords of guitar or ukulele in the form of svg.

License

Notifications You must be signed in to change notification settings

haixiangyan/react-chord-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-chord-generator

Generator for generating chords of guitar or ukulele in the form of svg. This project is a sub project of Guitar-Editor.

I got the inspiration from website 有谱么 (A Chinese guitar tabs website). However, the ways we define a chord are totally different. It takes me 2 days to transfer all their chords data into mine. I have to say their way to define a chord is easier.

Screenshot

Screenshot

Directory

├── README.md
├── package.json
├── src
│   ├── App.js   ## Entry point
│   ├── components
│   │   └── Chord
│   │       ├── Chord.jsx  
│   │       ├── CustomChord
│   │       │   ├── CustomChord.jsx  ## CustomChord component
│   │       │   ├── styles.css
│   │       │   └── utils.js  ## Files to calculate position of svg
│   │       └── chords.js     ## Normal chord component
│   ├── dataSource
│   │   └── chords.js         ## All chords data
│   ├── index.js
│   └── registerServiceWorker.js
└── yarn.lock

How to run

$ npm install

$ npm start

How to use

chordName can be 'Am', 'C', 'Fm' ...

<Chord chordName="F"/>

All Chords

Chords 1

Chords 2

Chords 3

Advanced

How to define a chord

There is a component called CustomChord nested in Chord component. For this component, everything should be well defined by yourself.

chord should be an object like this:

let chord = {
    "name": "F",
    "crosses": [],
    "points": [{"x": 1, "y": 2.5, "text": "3"}, {"x": 2, "y": 2.5, "text": "4"}, {"x": 3, "y": 1.5, "text": "2"}],
    "lines": [{"text": 1, "start": {"x": 0, "y": 0.5}, "end": {"x": 5, "y": 0.5}}],
    "min": {"text": "", "x": -1, "y": -1},
    "max": {"text": "", "x": -1, "y": -1}
}

Then put it into the component.

<CustomChord chord={chord} />

The rules are as followed:

Instructions

Guitar Lyrics

Want to see how to use this to compo with text? Please check this out.

Guitar tabs editor

If you like this project, maybe you love my Guitar-Editor. You can edit a guitar tab with the online editor.

About

Generator for generating chords of guitar or ukulele in the form of svg.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages