Lyrics and chords formatting on iOS

Question

I am currently working on an iPhone app that requires displaying the lyrics of a song along with the guitar chords. The output on the screen would be similar to something like this:

I am still wondering what would be the best type of format to carry this kind of data (lyrics, chords and timestamps in the track for each line). I was thinking about using a JSON file formatted this way:

{
      "lyrics": [
          {
              "text":"This is one line of lyrics",
              "startTimestamp":5000,
              "endTimestamp":5800,
              "chords":[
                  {
                      "symbol":"A",
                      "position":0.2
                  },
                  {
                      "symbol":"D#",
                      "position":0.8
                  }
                  ]
          },
          { ... },
          { ... }
       ]
}

Another option would have been to use a Chordpro format : http://tenbyten.com/software/songsgen/help/HtmlHelp/files_reference.htm

But this kind of format doesn't carry timestamps to synchronise the display of the lyrics with the music and seems a bit painful to parse on iOS. Are there any other interesting options I could consider, HTML for example?

The app is gonna include lyrics for only 12 tracks.

Answer 1

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!