a
scrolling
scrolling
scrolling
scrolling
lyric player

You can easily implant KaraOBird into your webpage.

Step 1

First, you have to make sure you have your website.

Step 2

Then, insert the core of the KaraOBird by the following html:

<iframe src="http://youtubelyric.com/lyric/showlyric.php?song=<|song|>&artist=<|artist|>" id="karaobird" width="300" height="450"></iframe>

Remember to replace <|song|> to the the title of the song and <|artist|> to the artist of the song.You can also change the height and the width of the frame.

Step 3

To synthesize between the song and the lyric, use the following javascript to set the time of the lyric.

document.getElementById("karaobird").contentWindow.postMessage(time,'http://youtubelyric.com');

Set the variable "time" as the current time of the music.

You don't have to sync every second of the song. Just sync the lyric at the start and when the song is being moved by the user.

All done. Simple.

Demo

Move to second :
Javascript input: