ThunderLee Posted March 1, 2010 Share Posted March 1, 2010 Hi there, I'm not farmilliar with Java and I tried contacting the creator of this script numerious times and I'm not getting anywhere with it :/.. There is a function here (create_jwplrc) that makes the JW player with the lyrics container below the player.. what I'm in need of is to place the lyrics window in another area of my website.. (I have tables on my website and my player is in 1 table and I want the lyrics window in another winow..) I can't seem to firgure out how to do this, I have tried to get help of my friend who knows little JS but doing his edits made the thing break, if anyone would be kind enough to try to help me I would be greatful. this is jwplrc.js /* * DO WHAT THE F**K YOU WANT TO PUBLIC LICENSE * Version 2, December 2004 * * Copyright (C) 2009 Wensheng Wang (wenshengwang at gmail dot com) * * Everyone is permitted to copy and distribute verbatim or modified * copies of this license document, and changing it is allowed as long * as the name is changed. * * TERMS AND CONDITIONS * * 0. You just DO WHAT THE F**K YOU WANT TO. * * */ /* * info: http://blog.wensheng.com/2009/09/jw-media-player-with-lyrics-scroller.html * * This script must be loaded after following 3 scripts: * * jquery.js (http://jquery.com/) * jquery.scrollTo.js (http://plugins.jquery.com/project/ScrollTo) * swfobject.js (v2 or later) (http://code.google.com/p/swfobject/) * * */ function setdefault(a,o,v){ if(!(a in o)){o[a]=v; } } function parseTime(x) { var l = x.split('.'); var t = 0; try { var j = l[0].split(':'); t += parseFloat(j[j.length - 1]) if (j.length > 1) { t += parseFloat(j[j.length - 2]) * 60.0; } if (j.length > 2) { t += parseFloat(j[j.length - 3]) * 3600.0; } t += 0.00001; return t; } catch (e) { return 0; } } function create_jwplrc(divid,width,height,flashvars,params,playerid){ setdefault("autostart", flashvars, "true"); setdefault("backcolor", flashvars, "0x000000"); setdefault("frontcolor", flashvars, "0xCCCCCC"); setdefault("lightcolor", flashvars, "0x557722"); setdefault("allowfullscreen", params, "true"); setdefault("allowscriptacess", params, "always"); swfobject.embedSWF("player.swf", divid, width, height, "9.0.0", false, flashvars, params, { id:playerid, name:playerid} ); } var debug_jwplrc= false; function debug_pout(s){ if(debug_jwplrc && $("#debug_jwl").length>0) $("#debug_jwl").append(s); } var alllrc={}; var last_played=["",-1]; function get_the_lrc(obj){ var player = document.getElementById(obj['id']); var pcfg = player.getConfig() var plist = player.getPlaylist() var curr_playing = pcfg.item; var lrcurl=false; if('lrc' in pcfg){ lrcurl = pcfg['lrc']; } if(plist.length>1){ var n = plist[curr_playing].file; //1/18/2009, change to explicitly specify lrc in <info> in <track> //lrcurl = n.substr(0,n.lastIndexOf("."))+".lrc"; lrcurl = plist[curr_playing].link; } if(lrcurl==false){ display_lrc(obj['id'],[0,"No Lyrics specified",false]); return; } if(last_played[0] == obj['id'] && last_played[1]==curr_playing){ return; } last_played = [obj['id'],curr_playing]; if(lrcurl in alllrc){ display_lrc(obj['id'],alllrc[lrcurl]); }else{ debug_pout("Getting lrc<br />"); $.get(lrcurl, function(data){ alllrc[lrcurl]=load_the_lrc(data); display_lrc(obj['id'],alllrc[lrcurl]); }); } debug_pout("obj[id] is "+obj['id']+"<br />"); } function display_lrc(pid,lrcdata){ debug_pout("current lrc has "+lrcdata.length+" lines<br />"); var divlrc=$("#lrc_"+pid); var lrclen=lrcdata.length; divlrc.find("p").remove(); //clear all for(var i=0;i<lrclen;i++){ var p; if($.trim(lrcdata[i][1])==""){ p = $("<p> </p>"); }else{ p=$("<p>"+lrcdata[i][1]+"</p>"); } p.attr('id',"plrc_"+pid+"_"+i); divlrc.append(p); } divlrc.scrollTo( "0", 800 ); debug_pout("divlrc has "+divlrc.children().length+" children.<br />"); } load_the_lrc = function(data){ var zzz=[] var m = data.split(/\n/g); var d; var last_t = -1; for (var i = 0; i < m.length; i ++) { var line = $.trim(m[i]); if (line.match(/^\[([0-9:\.]+)\](.*)$/)){ //has timestamp(s) var items = line.split(/[\[|\]]/); var tmpt = [] for(var j=0;j<items.length-1;j++){ if(t=parseTime(items[j])){ tmpt.push(t); zzz.push([t,items[items.length-1],true]); } } last_t = Math.min.apply(Math,tmpt);//the smallest timestamp }else{ last_t += 0.0001; zzz.push([last_t,line,false]); //false mean it's not real lyrics line } } zzz.sort (function(a, b) { return a[0] - b[0]; }); return zzz; }; var lxjn={} var lxjl={} function cont(obj) { var oid=obj['id']; var player = document.getElementById(obj['id']); var pcfg = player.getConfig() var plist = player.getPlaylist() var curr_playing = pcfg.item; var lrcurl=false; if('lrc' in pcfg){ lrcurl = pcfg['lrc']; } if(plist.length>1){ var n = plist[curr_playing].file; //1/18/2009, change to explicitly specify lrc in <info> in <track> //lrcurl = n.substr(0,n.lastIndexOf("."))+".lrc"; lrcurl = plist[curr_playing].link; } if(lrcurl==false){ return; } if (!(lrcurl in alllrc) || alllrc[lrcurl].length < 1){ return; } if(obj.position <0){ lxjn[oid] = 0; //this is array index for alllrc[lrcurl] return; } var curlrc = alllrc[lrcurl]; if(lxjl[oid] && obj.position > curlrc[lxjl[oid]][0]){ //seeked back lxjn[oid] = curlrc.length-1; while(lxjn[oid]>1 && obj.position < curlrc[lxjn[oid]-1][0]){ lxjn[oid]--; } $("#plrc_"+oid+"_"+lxjl[oid]).css({"font-weight":"","background-color":"#000"}); var tmpn = lxjn[oid]-1; while(tmpn && curlrc[tmpn][2]==false){ tmpn--; } if(tmpn>3){ $("#lrc_"+oid).scrollTo( $("#plrc_"+oid+"_"+(tmpn-3)), 200 ); }else{ $("#lrc_"+oid).scrollTo( $("#plrc_"+oid+"_"+tmpn), 200 ); } $("#plrc_"+oid+"_"+tmpn).css({"font-weight":"bold","background-color":"#077"}); lxjl[oid] = tmpn; return; } if ( lxjn[oid]<curlrc.length && obj.position > curlrc[lxjn[oid]][0]){ var scroll_time = 800; if(lxjn[oid]<curlrc.length-1 && obj.position > curlrc[lxjn[oid]+1][0]){ //seeked forward while(lxjn[oid]<curlrc.length-1 && curlrc[lxjn[oid]+1][2] && obj.position > curlrc[lxjn[oid]+1][0]){ lxjn[oid]++; } scroll_time = 100; } debug_pout(obj.position+" lxjn[oid]="+lxjn[oid]+", lxjl[oid]="+lxjl[oid]+"<br />"); $("#plrc_"+oid+"_"+lxjl[oid]).css({"font-weight":"","background-color":"#000"});//clear last line if(lxjn[oid]>3){ //debug_pout("should scroll now<br />"); $("#lrc_"+oid).scrollTo( $("#plrc_"+oid+"_"+(lxjn[oid]-3)), scroll_time ); } $("#plrc_"+oid+"_"+lxjn[oid]).css({"font-weight":"bold","background-color":"#077"}); lxjl[oid] = lxjn[oid]; lxjn[oid]++; while(lxjn[oid]<curlrc.length-1 && curlrc[lxjn[oid]][2]==false){ //skip lines with no timestamp lxjn[oid]++; } } } function playerReady(obj){ var player = document.getElementById(obj['id']); var pcfg = player.getConfig(); var lrcdiv = $("<div></div>"); var dwidth = pcfg.width; if(player.width)dwidth=player.width; //in IE, sometime getConfig().width is not ready lrcdiv.attr('id',"lrc_"+obj['id']); lrcdiv.css({"color":pcfg.frontcolor.replace("0x","#"), "background-color":pcfg.backcolor.replace("0x","#"), "border":"1px solid #777", "width":"300px", "height":"250px", "overflow":"auto"}); $("#"+obj['id']).after(lrcdiv); lxjn[obj['id']] = 0; lxjl[obj['id']] = 0; player.addModelListener("LOADED","get_the_lrc"); player.addModelListener("TIME","cont"); } this is my code where the player is to be shown/created? <script type="text/javascript" src="z/jquery.js"></script> <script type="text/javascript" src="z/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="z/swfobject.js"></script> <script type="text/javascript" src="z/jwplrc.js"></script> <span style="font-size: 6.2pt"> </span><div id='mediaspace'>Error Loading Content..</div> <span style="font-size: 6.2pt"> </span> <script type="text/javascript"> var flashvars = { file:"<?php echo $m['musiclocation']; ?>", lrc:"z/rick.lrc", image:"<?php echo $m['musicalbumart']; ?>", autostart:"true", bufferlength:"60" }; create_jwplrc("mediaspace","100","100",flashvars,{},"music"); </script> <div id="debug_jwl"></div> This code creates the player with the lyrics window directly below the player.. I want the lyrics window in another area of my webpage? Quote Link to comment Share on other sites More sharing options...
ThunderLee Posted March 2, 2010 Author Share Posted March 2, 2010 Nevermind I spent hours on it and found a div that I could position .. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.