I am also interested in this question. I'm creating a 'serverless' web page for my own catalog of songs using only HTML, CSS, and JavaScript.
I am also hoping to come up with a way to store the chord/lyric info in JSON. I am newer to this line of thinking, but I am hoping to organize the text lines as stanza's and tag them with "Chorus, Verse, Intro ... ", and then mapping them to chord progressions (kinda like an OOP approach).
So far I have come across lots of Music XML stuff, but that seems to be for more formal sheet music.
Right now I am experimenting with just storing the text in HTML and rendering it in a 'pre'
tag.
I guess a simple solution would be to neglect exact word to chord timing and just render the appropriate chords on top of the appropriate line of lyrics.
[A D#]
'This is one line of lyrics'
Or ... maybe be could assign each line of lyrics a value of say 12 in length (like Bootstrap Grids, but could base this on number of beats per line including a divisor) and then assign each chord a 'slot' to fill in the line above?
So
Em7 G
Today is gonna be the day
Dsus4 A7sus4
That they're gonna throw it back to you,
would be something like (where beat_of_measure = beat/2 % 4)
{
"stanza1":
{
"type": "verse",
"line1":{
"lyric": "Today is goinna be the day that they're", //4 beats subdivided = 8 length
"start_beat": 1, //half a beat after Em7 chord
"end_beat": 7},
"line2":{
"lyric": "goinna throw it back to you"
"start": 8 //goinna is right on beat 5, (think modulo 4)
"end": 12}
}
"verse_chords":[
{
"symbol":"Em7",
"chord_beat":0 //starts at very beginning
},
{
"symbol":"D#",
"chord_beat":4
},
{
"symbol":"Dsus4",
"chord_beat":8
},
{
"symbol":"A7sus4",
"chord_beat":12
},
],
bla bla bla
]
}
Sorry for this ridiculous answer!