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.
The bug you noticed is a little perplexing since I developed the site on a 13" MacBook. If you have a moment, I'd love to know more about the system where you saw this behavior: Browser, OS, Screen Res, Browser Window Size... (If you'd like you can email me at: [email protected]) Thanks for the feedback.
you can't stop the viral spread of something like this.
Check my other post in this thread. Also, it's OS X 10.5.6. Maximized window.
The first message that comes in (randomly) obscures the text about raising funds. Is it a bug or, respectfully, a design flaw / feature? I would suggest you test this on a netbook.
That's a great idea. We're talking with some potential sponsors now so perhaps this could be an avenue for a matching-funds type of fundraiser... I'll follow up with email. Thanks!
The author states that this is "an unmodified picture, straight off the digicam". Unfortunately for his test, this means the light passed through a Bayer filter, which uses a pattern of "50% green, 25% red and 25% blue": http://en.wikipedia.org/wiki/Bayer_filter
Anyone want to bet that, a year or two from now, we'll be reading that "the kids" prefer listening to sped-up music?
Also, I object to The Waitresses being labelled "one hit wonders". The author apparently forgot about the ubiquitous holiday song "Christmas Wrapping".
http://www.faqs.org/faqs/ai-faq/neural-nets/part1/
http://www.faqs.org/faqs/ai-faq/neural-nets/part2/
http://www.faqs.org/faqs/ai-faq/neural-nets/part3/
http://www.faqs.org/faqs/ai-faq/neural-nets/part4/
http://www.faqs.org/faqs/ai-faq/neural-nets/part5/
http://www.faqs.org/faqs/ai-faq/neural-nets/part6/
http://www.faqs.org/faqs/ai-faq/neural-nets/part7/