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)
16 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
Thanks Wensheng ;) I have want Media Player for web same you but now i can't write code because i'm busy :( Today I'm searching goole LRC Player Website I found your bog. I have many MP3 + LRC (English, Vietnamese). I have downloaded TTPlayer, kugou Player. I known chinese IT very good, very smart. Thanks you very much. My Site Demo:
http://tuananhpc.sx33.net/Music/demo.html
Sorry my english id poor ^_^
Hi Wensheng, thank for sharing this great creation.
By the way, is there any way i can change the colours?
I'm having the same problem as Lee. Everything loads except the lyrics. I turned on debug and it says the lyric file has 3 lines no matter what, and the only thing that shows up is "0" for the lyrics.
Figured it out. The newest JW Player doesn't work with this. You have to use the one included in the zip. I was trying to piece the javascripts and stuff together separately. Just use the stuff in the Zip.
If I have time I may update this.
Hi, Thanks for you sharing of your code. I have spent several hours on looking for something like this. I Hope this can really help me and end my searching. :) Anyway, great job, dude. Even several years after your uploading, this still benefits people like me. :)
By the way, I want to use it on my local pc. But now it doesn`t show the lyrics. Any idea on how to show lyrics on local pc??? Thanks in advance :)
Post a Comment