I decided to make a more modern karaoke player in JavaScript (from my attempt in 2005). It’s more modular and self-contained, so it can be integrated into any page (such as for… an easter egg! ;)…). I separated the karaoke timing code from the rendering code, so RiceKaraoke is just in charge of timing. There is an API to attach a renderer to RiceKaraoke, and I wrote a basic renderer for it. RiceKaraoke is also not responsible for playing the music, but you can plug in something like SoundManager2.
Here’s a demo:
http://www.sk89q.com/playground/ricekaraoke/
RiceKaraoke example
Here is the code, released under GPLv3:
http://github.com/sk89q/ricekaraoke/tree/master
The documentation is pretty bad, so good luck if you want to try it out for yourself. The documentation is a bit better now.
The default renderer that I provide is simple. It can do all the basic stuff, but you can’t center or right-align the lyrics or have it wrap. To calculate the width of the lines, it has to append a hidden element to the page, check its width, and then remove the element. The renderer does this on every iteration (that there is a karaoke line to show), but it seems to be a pretty fast operation.
I'm on Twitter!
Great code, Works very well.
But it does not work for Arabic which is read from right to left.
Is there an easy way to change the scripts to “read” from right to left.
I added in some preliminary right to left rendering support:
http://github.com/sk89q/ricekaraoke
The timings have to be right to left (obviously).
Try it out. It works under Firefox, mostly works under IE 8, and it doesn’t work at all on Chrome/Safari.
var renderer = new SimpleKaraokeDisplayEngine('karaoke-display', numDisplayLines, true);The third argument specifies right to left.
It works,
Thanks a lot again for the great code and quick responce.
Before I saw your reply I tried to manipulate the fragmentPercent in SimpleKaraokeDisplay and had little progress.
Only in Firefox actually as you already know. Is there a solution for IE?
Well, I haven’t worked on it, but you can try to get it to work by tinkering with the lines here:
http://github.com/sk89q/ricekaraoke/blob/a24d61bf0effdd05e0d7019f14da29f40a6e99d1/src/simplekaraokedisplay.js#L284
Could you please restore links with example & demo? And, do you have plans to support .kar files?