javascript之水平横向滚动歌词同步的应用


Posted in Javascript onMay 07, 2007

参考地址:http://aboutplayer.com

var lrc0, lrc1, lrc2; 
moveflag = false; 
var top, bottom; 
var lrcobj; 
var lrctop; 
predlt = 0; 
curdlt = 0; function lrcClass(tt) 
{ 
  this.inr = []; 
  this.oTime = 0; 
  this.dts = -1; 
  this.dte = -1; 
  this.dlt = -1; 
  this.ddh; 
  this.fjh; 
  if(/\[offset\:(\-?\d+)\]/i.test(tt)) 
    this.oTime = RegExp.$1/1000; 
  tt = tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1"); 
  tt = tt.replace(/\[[^\[\]\:]*\]/g,""); 
  tt = tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,""); 
  tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,""); 
  tt = tt.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,""); 
  tt = tt.replace(/<[^<>]*\:[^<>]*[^<>\d\.]+[^<>]*>/g,""); 
  while(/\[[^\[\]]+\:[^\[\]]+\]/.test(tt)) 
  { 
    tt = tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n"); 
    var zzzt = RegExp.$1; 
    /^(.+\])([^\]]*)$/.exec(zzzt); 
    var ltxt = RegExp.$2; 
    var eft = RegExp.$1.slice(1,-1).split("]["); 
    for(var ii=0; ii<eft.length; ii++) 
    { 
      var sf = eft[ii].split(":"); 
      var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]); 
      var sso = { t:[] , w:[] , n:ltxt } 
      sso.t[0] = Math.round((tse-this.oTime)*1000)/1000; 
      this.inr[this.inr.length] = sso; 
    } 
  } 
  this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} ); 
  for(var ii=0; ii<this.inr.length; ii++) 
  { 
    while(/<[^<>]+\:[^<>]+>/.test(this.inr[ii].n)) 
    { 
      this.inr[ii].n = this.inr[ii].n.replace(/<(\d+)\:([\d\.]+)>/,"%=%"); 
      var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2); 
      this.inr[ii].t[this.inr[ii].t.length] = Math.round((tse-this.oTime)*1000)/1000; 
    } 
    lrcbc1.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +" </font>"; 
    var fall = lrcbc1.getElementsByTagName("font"); 
    for(var wi=0; wi<fall.length; wi++) 
      this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth; 
    this.inr[ii].n = lrcbc1.innerText; 
  } 
  this.overtop = function() 
  { 
    var ii; 
    for(ii=this.inr.length-1; ii>0 && this.inr[ii].t[0]>ffbb; ii--){} 
    top = ii; 
  } 
  this.run = function(tme) 
  { 
    if(tme<this.dts || tme>=this.dte) 
    { 
      var ii; 
      for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){} 
      if(ii<0) return; 
      this.ddh = this.inr[ii].t; 
      this.fjh = this.inr[ii].w; 
      this.dts = this.inr[ii].t[0]; 
      this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration; 
      if(!movable) 
      { 
        lrctop = 140; 
        lrcoll.style.pixelTop = 140; 
        lowlight(lrcbox1); 
        this.overtop(); 
        overbottom(); 
        for(var wi=1; wi<=this.inr.length; wi++) 
        { 
          eval("lrcbox"+wi).innerText = this.inr[wi-1].n; 
          eval("lrcbc"+wi).innerText = this.inr[wi-1].n; 
        } 
        movable = true; 
      } 
      if(this.dlt>0) lowcolor(eval("lrcbc"+this.dlt)); 
      clearTimeout(lrc2); 
      if(this.dlt==ii-1) 
      { 
        predlt = this.dlt+1; 
        if(!ptms && predlt>0) 
        { 
          eval("lrcbc"+predlt).filters.alpha.opacity = 100; 
          eval("lrcbc"+predlt).style.width = "100%"; 
          highcolor(0,this.dte-this.dts); 
        } 
        toposition(1,this.dte-this.dts); 
      } 
      if(ii-this.dlt>1 || ii-this.dlt<=-1) 
      { 
        if(this.dlt>=0) lowcolor(eval("lrcbc"+(this.dlt+1))); 
        if(this.dlt==-1 || ii==0) 
        { 
          jumpto(ii-this.dlt-1); 
          toposition(1,this.dte-this.dts); 
        } 
        else 
          jumpto(ii-this.dlt); 
      } 
      if(this.dlt>=0) lowlight(eval("lrcbox"+(this.dlt+1))); 
      this.dlt = ii; 
      curdlt = ii; 
      if(!drdc) highlight(eval("lrcbox"+(this.dlt+1))); 
      if(drdc) 
      { 
        curlowcolor(eval("lrcbc"+(this.dlt+1))); 
        curhighcolor(0,this.dte-this.dts); 
      } 
    } 
    if(klok) 
    { 
      var bbw = 0; 
      var ki; 
      for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++) 
        bbw += this.fjh[ki]; 
      var kt = ki-1; 
      var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt]; 
      var tc = tme - this.ddh[kt]; 
      bbw -= this.fjh[kt] - tc / sc * this.fjh[kt]; 
      if(bbw>eval("lrcbox"+(this.dlt+1)).offsetWidth) 
        bbw = eval("lrcbox"+(this.dlt+1)).offsetWidth; 
      eval("lrcbc"+(this.dlt+1)).style.width = Math.round(bbw); 
    } 
  } 
  lrcbox1.innerText = "www.aboutplayer.com"; 
} 
function overbottom() 
{ 
  if(aboutplayer.currentMedia.duration>0) 
  { 
    var ii; 
    for(ii=lrcobj.inr.length-1; ii>0 && lrcobj.inr[ii].t[0]-ffbb>=aboutplayer.currentMedia.duration; ii--){} 
    bottom = ii; 
  } 
  else 
    setTimeout("overbottom()",10); 
} 
function jumpto(nline) 
{ 
  lrctop -= 20*nline; 
  lrcoll.style.top = lrctop; 
} 
function toposition(step,dur) 
{ 
  if(moveflag) return; 
  lrcoll.style.top = lrctop--; 
  if(step<20) 
  { 
    step++; 
    setTimeout("toposition("+step+","+dur+");",dur*50); 
  } 
} 
function highcolor(step,dur) 
{ 
  if(moveflag) return; 
  eval("lrcbc"+predlt).filters.alpha.opacity = 100-(step++)*10; 
  if(step<10) 
    lrc1 = setTimeout("highcolor("+step+","+dur+");",dur*100); 
} 
function curhighcolor(step,dur) 
{ 
  if(moveflag) return; 
  eval("lrcbc"+(curdlt+1)).filters.alpha.opacity = (step++)*10; 
  if(step<10) 
    lrc2 = setTimeout("curhighcolor("+step+","+dur+");",dur*100); 
} 
function highlight(lid) 
{ 
  lid.style.color = "#00FF00"; 
} 
function lowcolor(lid) 
{ 
  clearTimeout(lrc1); 
  lid.style.width = 0; 
  lid.filters.alpha.opacity = 100; 
} 
function curlowcolor(lid) 
{ 
  lid.filters.alpha.opacity = 0; 
  lid.style.width = "100%"; 
} 
function lowlight(lid) 
{ 
  lid.style.color = "#0080C0"; 
} 
function lrcrun(m) 
{ 
  lrcobj = new lrcClass(m); 
  lrc0 = setInterval("try {lrcobj.run(aboutplayer.controls.currentPosition+ffbb)} catch(hh){}",10); 
} 
MakeMovable(lrcollbox); 
function MakeMovable(element) 
{ 
  element.attachEvent("onmousedown",onmousedown);  
  element.attachEvent("onmouseup",onmouseup); 
  element.attachEvent("onmousemove",onmousemove); 
  flagmove = false; 
  var s_y, o_y; 
  curpot = 0; 
  function onmousedown() 
  { 
    if(event.button!=1 || moveflag || !movable || !type || bottom==0) {flagmove = true; return;} 
    clearTimeout(lrc0); 
    if(curdlt>0) lowcolor(eval("lrcbc"+curdlt)); 
    lowcolor(eval("lrcbc"+(curdlt+1))); 
    lowlight(eval("lrcbox"+(curdlt+1))); 
    if(lrcoll.style.pixelTop>120-top*20) lrcoll.style.top = 120-top*20; 
    if(lrcoll.style.pixelTop<120-bottom*20) lrcoll.style.top = 120-bottom*20; 
    s_y = event.clientY; 
    o_y = lrcoll.style.pixelTop; 
    element.style.cursor = "n-resize"; 
    element.setCapture(); 
    moveflag = true; 
  } 
  function onmousemove() 
  { 
    if(event.button!=1 || !moveflag || flagmove) return; 
    var offy = event.clientY-s_y; 
    if(o_y+offy<=120-top*20 && o_y+offy>=120-bottom*20) lrcoll.style.top = o_y+offy; 
    if(o_y+offy>120-top*20) lrcoll.style.top = 120-top*20; 
    if(o_y+offy<120-bottom*20) lrcoll.style.top = 120-bottom*20; 
    var pot = Math.floor((lrcoll.style.pixelTop-120)/-20); 
    if(pot!=curpot) 
    { 
      lowlight(eval("lrcbox"+(curpot+1))); 
      curpot = pot; 
      highlight(eval("lrcbox"+(curpot+1))); 
    } 
  } 
  function onmouseup() 
  { 
    if(!moveflag || flagmove) {flagmove = false; return;} 
    if(aboutplayer.playState==3) 
    { 
      if(lrcoll.style.pixelTop<=120-top*20 && lrcoll.style.pixelTop>100-top*20) 
        lrcobj.dte = -1; 
      else 
        lrcobj.dte = lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)-1].t[0]; 
      if(lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0]-ffbb<0) 
        aboutplayer.controls.currentPosition = 0; 
      else 
        aboutplayer.controls.currentPosition = lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0]-ffbb; 
      lrcobj.dlt = Math.floor((lrcoll.style.pixelTop-120)/-20); 
      lrctop = lrcoll.style.pixelTop; 
    } 
    else 
    { 
      lowlight(eval("lrcbox"+(curpot+1))); 
      highlight(eval("lrcbox"+(curdlt+1))); 
      lrcoll.style.top = o_y; 
    } 
    lrc0 = setInterval("try {lrcobj.run(aboutplayer.controls.currentPosition+ffbb)} catch(hh){}",10); 
    element.releaseCapture(); 
    element.style.cursor = "hand"; 
    moveflag = false; 
  } 
}
Javascript 相关文章推荐
JavaScript执行效率与性能提升方案
Dec 21 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
javascript里使用php代码实例
Dec 13 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
javascript之ESC(第二类混淆)
May 06 #Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 #Javascript
使用正则替换变量
May 05 #Javascript
又一个小巧的图片预加载类
May 05 #Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 #Javascript
用js实现的抽象CSS圆角效果!!
May 03 #Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 #Javascript
You might like
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php数组添加元素方法小结
2014/12/20 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
React组件生命周期详解
2017/07/03 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python计算程序运行时间的方法
2014/12/13 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
Python发送邮件实现基础解析
2020/08/14 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
幼儿发展评估方案
2014/06/11 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers