Quick-updating, web-based chord chart viewer.
This React component seeks to solve one of the major nuisances for musicians looking for charts on the web: crappy charts. The internet is flooded with them. My hope is that providing a flexible and fast component that will display charts based on a well-defined JSON structure will help solve this problem.
The Data
The following is a definition of the JSON data structure used by Lightning Viewer.
title: string
The title of the song this chart describes.
writers: array of strings (optional)
The writers who composed the song, not the artist who performed it.
performer: string
The artist whose arrangement or performance this song describes.
defaultKey: string
Lightning Viewer will have the ability to change keys to suit the user's preference, but each song needs a reference key from which to start.
sections: array of section objects
This property describes the various sections in the order that they should appear on the chart.
section.title: string (optional)
The title of the section.
section.lines: array of line objects
Describes the various combinations of chords and lyrics that make up a section. They will appear in the same order as the elements in the array.
line.lyrics: string
These lyrics should represent a single line on the chart.
line.chords: array of chord objects
These chords will be positioned over certain parts of the lyrics based on their provided position. For example, if a chord has a position of 7, it will be positioned over the seventh character in the lyrics.
chord.chord: string
This is the chord itself, e.g. Am7, F#maj7b5, 6-.
chord.position: number
Determines which character over which this chord will be positioned.
Example Data
{
title: 'Test Song',
writers: ['John Doe', 'Sam Hill', 'Sara Stewart'],
performer: 'Hotwork',
defaultKey: 'E',
sections: [
{
title: 'Verse 1',
lines: [
{
chords: [
{ chord: 'E', position: 0 },
{ chord: 'A', position: 10 },
{ chord: 'B', position: 22 }
],
lyrics: "This is a line in my test song and it's not meant to be sung as is"
},
{
chords: [
{ chord: 'A', position: 10 },
{ chord: 'C#m', position: 33 },
{ chord: 'C', position: 41 }
],
lyrics: 'Line number two happens here and not much is going on'
},
{
lyrics: "This line doesn't have any chords, oh no"
},
{
chords: [
{ chord: 'E', position: 0 },
{ chord: 'F#maj7b5', position: 15 },
{ chord: 'G#m7', position: 32 },
{ chord: 'C#m9', position: 45 }
],
lyrics: "This line isn't particularly long but it should be long enough"
}
]
},
{
title: 'Chorus',
lines: [
{
chords: [
{ chord: 'E', position: 0 },
{ chord: 'B', position: 30 }
],
lyrics: 'This is the first line of the chorus'
},
{
chords: [
{ chord: 'A', position: 10 },
{ chord: 'C#m', position: 23 }
],
lyrics: "So please don't let is bore us"
},
{
chords: [
{ chord: 'F#maj7b5', position: 15 }
],
lyrics: "Yeah, don't let it bore us, chorus!"
}
]
},
{
title: 'Verse 2',
lines: [
{
chords: [
{ chord: 'Emaj7', position: 0 },
{ chord: 'A', position: 21 },
{ chord: 'F#m13', position: 34 }
],
lyrics: "The beginning of the second verse sure ain't the end"
},
{
chords: [
{ chord: 'A', position: 10 },
{ chord: 'C#m', position: 43 }
],
lyrics: "You could say it's only the beginning, but you'd be wrong"
},
{
chords: [
{ chord: 'G#m', position: 0 }
],
lyrics: 'This is a quick line'
},
{
chords: [
{ chord: 'E', position: 0 },
{ chord: 'Amaj7', position: 15 },
{ chord: 'B7', position: 32 }
],
lyrics: "This line carries some weight since it's the last one"
}
]
},
{
lines: [
{
chords: [
{ chord: 'A', position: 0 },
{ chord: 'B7', position: 13 }
],
lyrics: 'Super catchy tag line'
}
]
}
]
}