guitar chord html5,GitHub - czp1623/react-chord-generator: Generator for generating chords of guitar...

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

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' ...

All Chords

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.

The rules are as followed:

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.