lrc.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. /* ===================================================
  2. * jqlyric.js v0.1
  3. * shawnk@qq.com
  4. * 使用方法
  5. * var $container=$('#lyriccontainer'); //用于显示歌词的容器对象,样式自己定义
  6. * $container.jqlyric({
  7. * lyric:'\
  8. [ti:存在] \
  9. [ar:汪峰] \
  10. [al:存在] \
  11. [by:Love] \
  12. [00:00.00]汪峰 - 存在 \
  13. [00:00.68]多少人走着却困在原地 \
  14. [00:07.93]多少人活着却如同死去', // 歌词字符串,标准lrc文件格式
  15. * speed:1000, // 歌词滚动间隔 (毫秒)
  16. * getPosition:function(){ // 获取当前播放位置的函数(返回秒数), 请定义外部函数,不指定本参数则默认从调用插件开始自动播放
  17. * return position;
  18. * }
  19. * });
  20. * ===================================================
  21. *
  22. * Licensed under the Apache License, Version 2.0 (the "License");
  23. * you may not use this file except in compliance with the License.
  24. * You may obtain a copy of the License at
  25. *
  26. * http://www.apache.org/licenses/LICENSE-2.0
  27. *
  28. * Unless required by applicable law or agreed to in writing, software
  29. * distributed under the License is distributed on an "AS IS" BASIS,
  30. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31. * See the License for the specific language governing permissions and
  32. * limitations under the License.
  33. * ========================================================== */
  34. (function($) {
  35. var gtime=0;
  36. var lyric_listener;
  37. $.fn.jqlyric = function(options) {
  38. var opts = $.extend({}, $.fn.jqlyric.defaults, options);
  39. return this.each(function(){
  40. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
  41. var $this=$(this);
  42. var arrLyric=new Array(); //放存汉字的歌词
  43. var arrTime=new Array(); //存放时间
  44. var currentLine=0; //当前活动的歌词行号
  45. // 开始解析歌词
  46. //将歌词解析成数组
  47. console.log(o.lyric);
  48. var arrly=o.lyric.split('\n');
  49. for(var i=0;i<arrly.length;i++){
  50. var str=arrly[i];
  51. str=str.substring(str.indexOf("[")+1,str.indexOf("]"));
  52. if(str.indexOf('ti:')>-1||str.indexOf('ar:')>-1||str.indexOf('al:')>-1||str.indexOf('by:')>-1){
  53. // 歌曲特征字段
  54. var tmp=str.substring(str.indexOf(':')+1);
  55. var text=tmp;
  56. //tag=tag.replace(/([ti|ar|al|by])/g,'');
  57. //arrLyric.push(tag+text);
  58. //arrTime.push(toSeconds('00:00:00')); //
  59. }else{
  60. var text=arrly[i].substring(arrly[i].indexOf("]")+1);
  61. //if(text==''){text='&nbsp;';}
  62. arrLyric.push(text); //放歌词
  63. arrTime.push(toSeconds(str)); //放时间
  64. }
  65. }
  66. // 所有歌词按时间顺序排列
  67. for(var k=0;k<arrTime.length;k++){
  68. for(var j=0;j<arrTime.length-k;j++){
  69. if(arrTime[j]>arrTime[j+1]){
  70. temp=arrTime[j];
  71. arrTime[j]=arrTime[j+1];
  72. arrTime[j+1]=temp;
  73. temp=arrLyric[j];
  74. arrLyric[j]=arrLyric[j+1];
  75. arrLyric[j+1]=temp;
  76. }
  77. }
  78. }
  79. var arrLyricObj=new Array();
  80. for(var k=0;k<arrTime.length;k++){
  81. var lrcContent=arrLyric[k];
  82. var len=lrcContent.replace(/(^s*)|(s*$)/g, "").length;//console.log(lrcContent.charCodeAt(0).toString(16));
  83. if(!lrcContent|| len==0){
  84. continue;
  85. }
  86. var timeStart=arrTime[k];
  87. var timeEnd=k<arrTime.length-1?arrTime[k+1]-0.01:99999999999999;
  88. if(timeEnd<0){
  89. continue;
  90. }
  91. var lrc={timeStart:timeStart,timeEnd:timeEnd,lrcContent:lrcContent};
  92. arrLyricObj.push(lrc);
  93. }
  94. clearTimeout(lyric_listener);
  95. var fadeFinish=true;
  96. var timeFun=function (){ // 定时检查当前播放进度,作出滚动动作
  97. var pos=o.getPosition();
  98. for(var k=0;k<arrLyricObj.length;k++){
  99. if(pos>=arrLyricObj[k].timeStart&&pos<=arrLyricObj[k].timeEnd){
  100. if($("#line-current").attr("currentLine")!=k&&fadeFinish){
  101. if(k>0){
  102. $("#line-last span").fadeOut(1000,function(){
  103. var lc=arrLyricObj[k-1].lrcContent.split("<br/>");
  104. $("#line-last span:eq(0)").text(lc[0]);
  105. if(lc.length>1){
  106. $("#line-last span:eq(1)").text(lc[1]);
  107. }
  108. $("#line-last").attr("currentLine",k);
  109. $("#line-last span").fadeIn(1000,function(){
  110. fadeFinish=true;
  111. });
  112. });
  113. }
  114. if(k<arrTime.length-1){
  115. $("#line-next span").fadeOut(1000,function(){
  116. var lc=arrLyricObj[k+1].lrcContent.split("<br/>");
  117. $("#line-next span:eq(0)").text(lc[0]);
  118. if(lc.length>1){
  119. $("#line-next span:eq(1)").text(lc[1]);
  120. }
  121. $("#line-next").attr("currentLine",k);
  122. $("#line-next span").fadeIn(1000,function(){
  123. fadeFinish=true;
  124. });
  125. });
  126. }
  127. fadeFinish=false;
  128. $("#line-current span").fadeOut(1000,function(){
  129. var lc=arrLyricObj[k].lrcContent.split("<br/>");
  130. $("#line-current span:eq(0)").text(lc[0]);
  131. if(lc.length>1){
  132. $("#line-current span:eq(1)").text(lc[1]);
  133. }
  134. $("#line-current").attr("currentLine",k);
  135. $("#line-current span").fadeIn(1000,function(){
  136. fadeFinish=true;
  137. });
  138. });
  139. break;
  140. }
  141. }
  142. }
  143. lyric_listener=setTimeout(timeFun,o.speed);
  144. };
  145. lyric_listener=setTimeout(timeFun,o.speed);
  146. });
  147. };
  148. $.fn.jqlyric.defaults={
  149. lyric:'[00:00.00]未找到歌词', // 歌词字符串 (lrc格式)
  150. speed:500, // 歌词进度一首歌间隔(毫秒)
  151. getPosition:function(){ // 获取播放器当前播放位置
  152. gtime+=0.5;
  153. return gtime;
  154. }
  155. }
  156. function toSeconds(t){ //把形如:01:25的时间转化成秒;
  157. var m=t.substring(0,t.indexOf(":"));
  158. var s=t.substring(t.indexOf(":")+1);
  159. s=parseInt(s.replace(/\b(0+)/gi,""));
  160. if(isNaN(s))
  161. s=0;
  162. var totalt=parseInt(m)*60+s;
  163. //alert(parseInt(s.replace(/\b(0+)/gi,"")));
  164. if(isNaN(totalt))
  165. return 0;
  166. return totalt;
  167. }
  168. })(jQuery);
  169. $(function() {
  170. var audio=document.getElementById("audio");
  171. if(!audio){
  172. return;
  173. }
  174. var fun_getPosition=function(){
  175. return audio.currentTime;
  176. }
  177. var url=audio.currentSrc;
  178. var urlArr = url.split('?');
  179. var k = urlArr[0], appU = k.split('/');
  180. var srcFileExt = appU[appU.length - 1].split('.')[1];
  181. url=url.replace("."+srcFileExt,".lrc");
  182. var url = "http://122.114.50.251:8010/getJSON.php?callback=?&url="+(url);
  183. $.getJSON(url, function(data){
  184. var lrcContent=data.data;
  185. if(!lrcContent||lrcContent==""){
  186. return;
  187. }
  188. var $container=$('#lyriccontainer'); //用于显示歌词的容器对象,样式自己定义
  189. $container.jqlyric({
  190. lyric:lrcContent, // 歌词字符串,标准lrc文件格式
  191. getPosition:fun_getPosition
  192. });
  193. });
  194. });