I love the fact that when the words "Billie" and "Jean" come up it's always somebody tweeting about the song, often with an MJ-themed icon. I guess it's a tribute to quite how popular the man was that people are still talking about him days later (Farrah who?).
I had a quick look at the source, I hope that qualifies me to answer your question :)
The page contains a list of tuples which contain word, time, and indentation level. The tweets are loaded in the background from the billietweets server. I don't know if the list is static or gets updated from time to time. The YouTube player is used to get the current play time and the right word is looked up from the word list. The highlighting of the word in the tweet is done with a regular expression. And yes, it uses jquery.
Edit: great, I craft an answer, just to see the question vanish.
deleted post :
a good dedication!
mdd - what did you use? could you give some insight about how you did the synch between lyrics/tune? I am guessing that there is no correlation, the video and lyric=tweet run in parallel. If you have more time, curious about your frameworks too. jquery,rails?
Sorry, I also saw the source, and figured out but was afraid of being down voted(it's almost like someone is swearing at you!). but your answer is much more than what i understood. I thought the author of this app could provide more details.
danielh was pretty much spot-on... The lyrics are stored with a time offset and indentation level (sort of like a player-piano roll) and the list of tweets is updated periodically by the server.
When the page is loaded, I take the lyrics information and generate a sparse array where each index represents a tenth of a second. Then I start an interval timer that runs an update function once every 100 milliseconds. That updater gets the current video time from the YouTube player, converts that time value from milliseconds to deciseconds, grabs all entries from the sparse array between its last run and the current time, and inserts them onto the page (with a 200 ms fadeIn animation).
To be perfectly honest, there really isn't much code involved at all. Most of the development time was spent figuring out the time offset of each word. There was no fancy technology used there... it was just a brute force effort (though perhaps the Mechanical Turk could have been of use?)
I haven't had any coffee yet this morning so please let me know if my explanation was incoherent or if you'd like more info.
Thanks a lot for your detailed response. Many times, I forget treating an app like a black box and instead of enjoying/appreciating it, I think about the underlying stuff that makes it.
