Hacker News new | past | comments | ask | show | jobs | submit login
Billie Tweets - a Twitter tribute to Michael Jackson's "Billie Jean" (billietweets.com)
34 points by mshafrir on June 29, 2009 | hide | past | favorite | 9 comments

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?).

A couple of times, I got references to Jean Michel Jarre for "Jean". Odd juxtaposition...

easily, one of the more creative twitter uses.

turns out I didn't even know the lyrics to the song that well :-) 20+ years!

Ha! Me too... and I built the site :)

I actually had to triple check with the various lyrics sites when I was coding it. I kept thinking there was no way these were the correct lyrics.


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.

(author here)

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.

On the browser side, I'm using jQuery and the YouTube chromeless player (http://code.google.com/apis/youtube/js_api_reference.html)

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.

Dude, it's just Karma, dont' worry about being Downmodded. Besides, ppl who downmod the curious are jerks :P

Never fear asking questions.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact