[JavaScript]网页中音乐LRC歌词同步显示

1. function LRCPlayer(wmp, strLRC, container, width, height, color1, color2) {
   
2.         this.wmp = wmp;
   
3.         this.height = height;
   
4.        
   
5.         this.checkInterval = 0;
   
6.         this.transInterVal = 0;
   
7.         this.currentFocus  = -1;
   
8.        
   
9.         var ls = this.ls = this.parseLRC(strLRC);
   
10.         var div = document.createElement('div');
    
11.         div.style.cssText = "display:block;width:"+width+"px; height:" + height + "px; overflow:hidden; background:#000;";
    
12.         var lrcPanel = this.lrcPanel = document.createElement('div');
    
13.         div.appendChild(lrcPanel);
    
14.         container.appendChild(div);
    
15.         this.colorTrans = this.colorCal(color1, color2);
    
16.         this.color1 = color1;
    
17.         var span = document.createElement('div');
    
18.         span.style.cssText = "height:" + (height/2) + "px;";
    
19.         lrcPanel.appendChild(span);
    
20.         for (var i=0; i<ls.length; i++) {
    
21.                 span = document.createElement('div');
    
22.                 span.style.cssText = 'font-size:12px; height:16px; line-height:16px; text-align:center; overflow: hidden; white-space: nowrap; color:#' + color1;
    
23.                 span.appendChild(document.createTextNode(ls[i].text));
    
24.                 lrcPanel.appendChild(span);
    
25.         }
    
26.         span = document.createElement('div');
    
27.         span.style.cssText = "height:" + (height/2) + "px;";
    
28.         lrcPanel.appendChild(span);
    
29.         this.start();
    
30. }
    
31. 
    
32. $.extend(LRCPlayer.prototype, {
    
33.         start: function() {
    
34.                 var me = this;
    
35.                 !function() {
    
36.                         setTimeout(arguments.callee, 128);
    
37.                         me.checkPos();
    
38.                 }();
    
39.         }
    
40.         , stop: function() {
    
41.                 if (this.checkInterval)
    
42.                         clearTimeout(this.checkInterval);
    
43.         }
    
44.         , checkPos: function() {
    
45.                 try {
    
46.                         var cPos = this.wmp.controls.currentPosition;
    
47.                         if (isNaN(cPos)) return;
    
48.                         if (this.currentFocus<this.ls.length-1 && cPos > this.ls[this.currentFocus+1].pos) {
    
49.                                 this.focusThis(this.currentFocus+1);
    
50.                         } else if (this.currentFocus>-1 && cPos<this.ls[this.currentFocus].pos) {
    
51.                                 this.focusThis(this.currentFocus-1);
    
52.                         }
    
53.                         if (this.currentFocus >= this.ls.length-1) return;
    
54.                         var pos = this.ls[this.currentFocus].pos;
    
55.                         var nPos = this.ls[this.currentFocus+1].pos;
    
56.                         var lrct = (cPos - pos)/(nPos - pos);
    
57.                         lrct = Math.max(Math.min(lrct, 1), 0);
    
58.                         this.lrcPanel.parentNode.scrollTop = (this.currentFocus+lrct) * 16;
    
59.                 } catch(e) { }
    
60.         }
    
61.         , focusThis: function(index) {
    
62.                 if (this.transInterVal) {
    
63.                         clearTimeout(this.transInterVal);
    
64.                 }
    
65.                 if (this.currentFocus > -1) {
    
66.                         this.lrcPanel.childNodes[this.currentFocus+1].style.color = '#'+this.color1;
    
67.                 }
    
68.                 this.currentFocus = index;
    
69.                 var me = this;
    
70.                 var i = 0;
    
71.                 !function() {
    
72.                         if (i>=8) return;
    
73.                         me.lrcPanel.childNodes[me.currentFocus+1].style.color = '#' + me.colorTrans[i++];
    
74.                         me.transInterVal = setTimeout(arguments.callee, 128);
    
75.                 }();
    
76.         }
    
77. 
    
78.         , colorCal: function(c1, c2) {
    
79.                 var oC2 = c2;
    
80.                 c1 = parseInt(c1, 16); c2 = parseInt(c2, 16);
    
81.                 var r1 = c1 >> 16, g1 = (c1 >> 8) & 0xff; b1 = c1 & 0xff;
    
82.                 var r2 = c2 >> 16, g2 = (c2 >> 8) & 0xff; b2 = c2 & 0xff;
    
83.                 var cs = [], d1 = r2 - r1, d2 = g2 - g1, d3 = b2 - b1, r, g, b;
    
84.                 for (var i=1; i<8; i++) {
    
85.                         r = r1+parseInt(Math.round(d1*i*0.125, 0));
    
86.                         g = g1+parseInt(Math.round(d2*i*0.125, 0));
    
87.                         b = b1+parseInt(Math.round(d3*i*0.125, 0));
    
88.                         cs.push( ("00000"+((r<<16)|(g<<8)|b).toString(16)).slice(-6) );
    
89.                 }
    
90.                 return cs.concat(oC2);
    
91.         }
    
92.        
    
93.         , parseLRC: function(str) {
    
94.                 var map = {'ti':'标题：', 'ar':'艺术家：', 'al':'专辑：', 'by':'歌词制作：'};
    
95.                 str = str.replace(/\[(ti|ar|al|by):([^[\]]*)\]/ig, function($, $1, $2) {
    
96.                         return '[00:00.00]' + (map[$1.toLowerCase()]||'') + $2;
    
97.                 });
    
98.                 var offset = 0;
    
99.                 str = str.replace(/\[offset:(-?\d+)\]/gi, function($, $1) {
    
100.                         offset = parseInt($1, 10) * 0.001;
     
101.                 });
     
102.                 var regex1 = /(\[[^[\]]+\])(\[[^[\]]+\])([^[\]]*?)$/m;
     
103.                 var regex2 = /(\[[^[\]]+\])(\[[^[\]]+\])([^[\]]*?)$/mg;
     
104.                 while (regex1.test(str)) {
     
105.                         str = str.replace(regex2, "$1$3\n$2$3");
     
106.                 }
     
107.                 var ls = [];
     
108.                 str.replace(/\[(\d+):([\d.]+)\](.*)/g, function($, $1, $2, $3) {
     
109.                         ls.push({ pos:parseInt($1,10)*60+parseFloat($2,10)*1+offset, text:$3 });
     
110.                 });
     
111.                 ls.sort(function(a, b) {
     
112.                         return a.pos-b.pos;
     
113.                 });
     
114.                 return ls;
     
115.         }
     
116. });

复制代码

具体使用例子，从下面地址下载:
http://u.115.com/file/f0faa8e20

附：
ASP 版的千千静听 LRC 歌词查询 [jscript]
http://www.iscripts.org/bbs/viewthread.php?tid=86

从千千静听的歌词服务器查询音乐的 LRC 歌词
http://www.iscripts.org/bbs/viewthread.php?tid=85

回复 7# 那个谁
臭杰杰
哼哼哼

u 蛋不给用迅雷的

回复 4# Alvin


    事实胜于雄辩

那个电信下载的按钮，能下啊，我试了

回复 2# momo

可以的吧，U蛋的服务器难道坏了

例子下载不了昂！