So today I made a new one, this time using jw media player. JW media player is a full featured web media player. It has almost everything. Now it has a lyrics scroller;)
Below is a demo, it's a iframe of this page.
Usage:
Include 4 javascript files in the html header:
jquery.js, jquery.scrollTo-1.4.2-min.js, swfobject.js, jwplrc.js
Then put these javascript code in html:
var flashvars = {
file:"somesong.mp3",
lrc:"somelrc.lrc"
};
create_jwplrc("player_divid","320","80",flashvars,{},"some_uniq_id");
The "file" flashvar can be used to specify a media file such as mp3 or a playlist xml file.
If it's a single media file, you need to specify "lrc" flashvar to tell the player where lrc file is. (update on 1/18/10)
if it's a playlist, no "lrc" flashvar is needed. You imply that lrc and media are at
same location/directory, and lrc and media have the same filename.
"create_jwplrc" is just a wrapper function that wraps "swfobject.embedSWF". The first argument for create_jwplrc is the id of a "<div>" that will be the player, 2nd/3rd are width and height, 4th is flashvars, 5th is parameters, it can be empty {}. The 6th argument is a unique name for the player.
File download wensheng.com/code/jwlyrics.tgz (updated 1/18/10)
10 comments:
Thank you for making this and posting it. I am using it in my web site. http://canaanhymns.org/singalong.htm
Thanks again,
Justin
Hi, from Peru. First of all Congratulations. Great job!
Just one question.
Works well in IE Explorer and Chrome, but I have problems in some
LRC in Mozilla Firefox, load the DIV where the LRC, is filled with
Strange symbols like this (�?).
Only occurs in some lirics and Firefox
I would like to know what is the problem?
encode your lrc the same as your web page, for example if your web page is utf-8, encode your lrc as utf-8, with iconv, etc.
Hello! Thank you for a job well done. This is really what I was looking for. However, when I download the zip file and opened the index.html, I can see the flashplayer loading, but not the lyric area.
I also tried to implemented it on my blog at http://anhstartest.blogspot.com/2010/01/test.html and I dont have the lyric area either.
Do you know why? Thank you in advance for your answer.
Hi, Anhstar,
It won't work locally on your PC. You have to upload the files to a web server to see it works.
Also I found the lyrics can't be loaded cross-domain. So I changed the js file and also the wordings in this blog.
I guess if you want to use it on blogger, you may have to use iframe from your own site.
Hi Wensheng Wang! I managed to make it work after some hours hehe. I found out there's a cross-domain problem with javascript so, I guess the only way to do it with Blogger is with iframe.
I put everything in the zip file into a folder in my DropBox and use iframe targeting the index.html from DropBox.
This is where I implemented your script: http://www.vochongnhanam.com/2010/01/truyen-kieu-phan-1.html
Anyhơw, a very good job you did, and I thank you very much :)
Ran across your page. Neat stuff. By the way, if you are using TTPlayer for playing lrc file. You might want to give the program I write a try. http://www.walasoft.com/walaoke
It can play lrc file on top of video with progressing lyric.
I can't get this to work at all :/ I added my song and lyric file but it won't load the lyrics when I press play, I have messed around with this for hours and can't get anywhere with it, also instead of using a lyric file is there any way that it could load a value from a database? (My website loads song/file information from a database.. and users submit lyrics into the database..)
Ok sorry, I got that to work now (Needed to add the mime file type on my server..) Anyway How could I use this with the latest version of JW Player? I don't understand how to add this into the new player code (Old code used flashvars?).. I can't figure it out it loads the video but the lyrics part or frame don't load, can you help please? Please email me..
thunder_lee@live.com
Post a Comment