码迷，mamicode.com
首页 > 其他好文 > 详细

Jplayer歌词同步显示插件

时间：2015-03-04 14:31:54      阅读：277      评论：0      收藏：0      [点我收藏+]

标签：

http://blog.csdn.net/wk313753744/article/details/38758317

 

1、该插件是一个jquery的编写的跟jplayer实现歌词同步的插件，最终效果如图：

 

技术分享

2、首先引入jplayer的相关的js库和样式文件。

 

 

[html] view plaincopy技术分享技术分享
 
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  2. <link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />  
  3. <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>  
  4. <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>  
  5. <script type="text/javascript" src="js/jquery.jplayer.lyric.js"></script>  

 

 

3、把我修改的jquery的js文件贴出来，以备以后不能下载的朋友参考实现：

 

 

[html] view plaincopy技术分享技术分享
 
  1. /*****  
  2. *原作mp3player.duapp.com  
  3. *修改 ：王坤  
  4. *QQ群:151013733  
  5. *修改内容说明：在原有基础上，需要使用start方法才能加载歌词，改进之后，在加载jplayer之前调用,显示歌词  
  6. */  
  7. (function($){  
  8.     $.lrc = {  
  9.         handle: null, /* 定时执行句柄 */  
  10.         list: [], /* lrc歌词及时间轴数组 */  
  11.         regex: /^[^
    ]∗((?:\s∗\[\d+\d+(?:\.\d+)?
    )+)([\s\S]*)$/, /* 提取歌词内容行 */  
  12.         regex_time: /
    (\d+)((?:\d+)(?:\.\d+)?)
    /g, /* 提取歌词时间轴 */  
  13.         regex_trim: /^\s+|\s+$/, /* 过滤两边空格 */  
  14.         callback: null, /* 定时获取歌曲执行时间回调函数 */  
  15.         interval: 0.3, /* 定时刷新时间，单位：秒 */  
  16.         format: ‘<li>{html}</li>‘, /* 模板 */  
  17.         prefixid: ‘lrc‘, /* 容器ID */  
  18.         hoverClass: ‘hover‘, /* 选中节点的className */  
  19.         hoverTop: 100, /* 当前歌词距离父节点的高度 */  
  20.         duration: 0, /* 歌曲回调函数设置的进度时间 */  
  21.         __duration: -1, /* 当前歌曲进度时间 */  
  22.         hasLrc:0,/**记录是否有歌词标记**/  
  23.         //初始化歌词   
  24.         init: function(txt){  
  25.         if(typeof(txt) != ‘string‘ || txt.length < 1) return;  
  26.             /* 停止前面执行的歌曲 */  
  27.             this.stop();  
  28.             var item = null, item_time = null, html = ‘‘;  
  29.             /* 分析歌词的时间轴和内容 */  
  30.             //先按行拆分歌词  
  31.             txt = txt.split("\n");  
  32.             //对拆分的每行进行提取时间和歌词内容  
  33.             for(var i = 0; i < txt.length; i++) {  
  34.                 //获取一行并去掉两端的空格 [00:11.38]如果你眼神能够为我片刻的降临  
  35.                 item = txt[i].replace(this.regex_trim, ‘‘);  
  36.                 //然后取出歌词信息  
  37.                 if(item.length < 1 || !(item = this.regex.exec(item))) continue;  
  38.                 while(item_time = this.regex_time.exec(item[1])) {  
  39.                     this.list.push([parseFloat(item_time[1])*60+parseFloat(item_time[2]), item[2]]);  
  40.                 }  
  41.                 this.regex_time.lastIndex = 0;  
  42.             }  
  43.             /* 有效歌词 */  
  44.             if(this.list.length > 0) {  
  45.                 this.hasLrc =1;  
  46.                 /* 对时间轴排序 */  
  47.                 this.list.sort(function(a,b){ return a[0]-b[0]; });  
  48.                 if(this.list[0][0] >= 0.1) this.list.unshift([this.list[0][0]-0.1, ‘‘]);  
  49.                 this.list.push([this.list[this.list.length-1][0]+1, ‘‘]);  
  50.                 for(var i = 0; i < this.list.length; i++)  
  51.                     html += this.format.replace(/\{html\}/gi, this.list[i][1]);  
  52.                 /* 赋值到指定容器 */  
  53.                 $(‘#‘+this.prefixid+‘_list‘).html(html).animate({ marginTop: 0 }, 100).show();  
  54.                 /* 隐藏没有歌词的层 */  
  55.                 $(‘#‘+this.prefixid+‘_nofound‘).hide();  
  56.                 /* 定时调用回调函数，监听歌曲进度 */  
  57.                 //this.handle = setInterval(‘$.lrc.jump($.lrc.callback());‘, this.interval*1000);  
  58.             }else{ /* 没有歌词 */  
  59.                 this.hasLrc =0;  
  60.                 $(‘#‘+this.prefixid+‘_list‘).hide();  
  61.                 $(‘#‘+this.prefixid+‘_nofound‘).show();  
  62.             }  
  63.         },  
  64.         /* 歌词开始自动匹配 跟时间轴对应 */  
  65.         /**callback时间 jplayer的当前播放时间**/  
  66.         start: function(callback) {  
  67.             this.callback = callback;  
  68.             /* 有歌词则跳转到歌词时间轴 */  
  69.             if(this.hasLrc == 1) {  
  70.                 this.handle = setInterval(‘$.lrc.jump($.lrc.callback());‘, this.interval*1000);  
  71.             }  
  72.         },  
  73.         /* 跳到指定时间的歌词 */  
  74.         jump: function(duration) {  
  75.             if(typeof(this.handle) != ‘number‘ || typeof(duration) != ‘number‘ || !$.isArray(this.list) || this.list.length < 1) return this.stop();  
  76.    
  77.             if(duration < 0) duration = 0;  
  78.             if(this.__duration == duration) return;  
  79.             duration += 0.2;  
  80.             this.__duration = duration;  
  81.             duration += this.interval;  
  82.    
  83.             var left = 0, right = this.list.length-1, last = right  
  84.                 pivot = Math.floor(right/2),  
  85.                 tmpobj = null, tmp = 0, thisobj = this;  
  86.    
  87.             /* 二分查找 */  
  88.             while(left <= pivot && pivot <= right) {  
  89.                 if(this.list[pivot][0] <= duration && (pivot == right || duration < this.list[pivot+1][0])) {  
  90.                     //if(pivot == right) this.stop();  
  91.                     break;  
  92.                 }else if( this.list[pivot][0] > duration ) { /* left */  
  93.                     right = pivot;  
  94.                 }else{ /* right */  
  95.                     left = pivot;  
  96.                 }  
  97.                 tmp = left + Math.floor((right - left)/2);  
  98.                 if(tmp == pivot) break;  
  99.                 pivot = tmp;  
  100.             }  
  101.    
  102.             if(pivot == this.pivot) return;  
  103.             this.pivot = pivot;  
  104.             tmpobj = $(‘#‘+this.prefixid+‘_list‘).children().removeClass(this.hoverClass).eq(pivot).addClass(thisobj.hoverClass);  
  105.             tmp = tmpobj.next().offset().top-tmpobj.parent().offset().top - this.hoverTop;  
  106.             tmp = tmp > 0 ? tmp * -1 : 0;  
  107.             this.animata(tmpobj.parent()[0]).animate({marginTop: tmp + ‘px‘}, this.interval*1000);  
  108.         },  
  109.         /* 停止执行歌曲 */  
  110.         stop: function() {  
  111.             if(typeof(this.handle) == ‘number‘) clearInterval(this.handle);  
  112.             this.handle = this.callback = null;  
  113.             this.__duration = -1;  
  114.             this.regex_time.lastIndex = 0;  
  115.             this.list = [];  
  116.         },  
  117.         animata: function(elem) {  
  118.             var f = j = 0, callback, _this={},  
  119.                 tween = function(t,b,c,d){ return -c*(t/=d)*(t-2) + b; }  
  120.             _this.execution = function(key, val, t) {  
  121.                 var s = (new Date()).getTime(), d = t || 500,  
  122.                     b = parseInt(elem.style[key]) || 0,  
  123.                     c = val-b;  
  124.                 (function(){  
  125.                     var t = (new Date()).getTime() - s;  
  126.                     if(t>d){  
  127.                         t=d;  
  128.                         elem.style[key] = tween(t,b,c,d) + ‘px‘;  
  129.                         ++f == j && callback && callback.apply(elem);  
  130.                         return true;  
  131.                     }  
  132.                     elem.style[key] = tween(t,b,c,d)+‘px‘;  
  133.                     setTimeout(arguments.callee, 10);  
  134.                 })();  
  135.             }  
  136.             _this.animate = function(sty, t, fn){  
  137.                 callback = fn;  
  138.                 for(var i in sty){  
  139.                     j++;  
  140.                     _this.execution(i,parseInt(sty[i]),t);  
  141.                 }  
  142.             }  
  143.             return _this;  
  144.         }  
  145.     };  
  146. })(jQuery);  


4、在jplayer初始化中使用如下：

 

 

[html] view plaincopy技术分享技术分享
 
  1. $(document).ready(function(){  
  2.     $("#jquery_jplayer_1").jPlayer({  
  3.         ready: function () {  
  4.             //初始化歌词信息(传入歌词文件文本)  
  5.             $.lrc.init($(‘#lrc_content‘).val());  
  6.             $(this).jPlayer("setMedia", {  
  7.                 title: "Bubble",  
  8.                 mp3: "mp3/林俊杰 - 曹操.mp3"  
  9.             }).jPlayer("play");  
  10.         },  
  11.         timeupdate: function(event) {  
  12.              if(event.jPlayer.status.currentTime==0){  
  13.                 time = "";  
  14.              }else {  
  15.                 time = event.jPlayer.status.currentTime;  
  16.              }  
  17.         },  
  18.         play: function(event) {  
  19.             //点击开始方法调用lrc.start歌词方法 返回时间time  
  20.             if($(‘#lrc_content‘).val()!==""){  
  21.                 $.lrc.start(function(){  
  22.                     return time;  
  23.                 });  
  24.             }else{  
  25.              $(".content").html("没有字幕");  
  26.             }  
  27.         },  
  28.         swfPath: "js",  
  29.         supplied: "mp3",  
  30.         wmode: "window",  
  31.         smoothPlayBar: true,  
  32.         keyEnabled: true,  
  33.         remainingDuration: true,  
  34.         toggleDuration: true  
  35.     });  
  36. });  

 

5、这一步不是必要的 只是提供一个我的源码给你们参考：

 

[html] view plaincopy技术分享技术分享
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <title>QQ群：845885222 完整jplayer歌词同步demo</title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />  
  7. <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>  
  8. <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>  
  9. <script type="text/javascript" src="js/jquery.jplayer.lyric.js"></script>  
  10. <style type="text/css">  
  11. *{ margin:0; padding:0; }  
  12. ul, ol, dl { list-style:none; }  
  13. .content li.hover{color:red; }  
  14. .content{ width:200px;overflow:hidden;padding:10px; text-align: center; font-size:12px;}  
  15. </style>  
  16. <script type="text/javascript">  
  17. //<![CDATA[ 
  18. $(document).ready(function(){ 
  19.     $("#jquery_jplayer_1").jPlayer({ 
  20.         ready: function () { 
  21.             //初始化歌词信息(传入歌词文件文本) 
  22.             $.lrc.init($(‘#lrc_content‘).val()); 
  23.             $(this).jPlayer("setMedia", { 
  24.                 title: "Bubble", 
  25.                 mp3: "mp3/林俊杰 - 曹操.mp3" 
  26.             }).jPlayer("play"); 
  27.         }, 
  28.         timeupdate: function(event) { 
  29.              if(event.jPlayer.status.currentTime==0){ 
  30.                 time = ""; 
  31.              }else { 
  32.                 time = event.jPlayer.status.currentTime; 
  33.              } 
  34.         }, 
  35.         play: function(event) { 
  36.             //点击开始方法调用lrc.start歌词方法 返回时间time 
  37.             if($(‘#lrc_content‘).val()!==""){ 
  38.                 $.lrc.start(function(){ 
  39.                     return time; 
  40.                 }); 
  41.             }else{ 
  42.              $(".content").html("没有字幕"); 
  43.             } 
  44.         }, 
  45.         swfPath: "js", 
  46.         supplied: "mp3", 
  47.         wmode: "window", 
  48.         smoothPlayBar: true, 
  49.         keyEnabled: true, 
  50.         remainingDuration: true, 
  51.         toggleDuration: true 
  52.     }); 
  53. }); 
  54. //]]>  
  55. </script>  
  56. </head>  
  57. <body>  
  58. <!--textarea只是用来存储歌词信息 并不做显示，如果要修改显示样式，修改id="lrc_list"的样式就行-->  
  59. <textarea id="lrc_content" style="display:none;">  
  60. [ti:曹操]  
  61. [ar:林俊杰]  
  62. [al:曹操]  
  63. [00:00.03]林俊杰-《曹操》  
  64. [00:13.35]作词：林秋离  
  65. [00:20.12]作曲：林俊杰  
  66. [00:25.32]  
  67. [01:33.46][00:26.82]不是英雄 不读三国  
  68. [01:40.12][00:33.43]若是英雄 怎么能不懂寂寞  
  69. [02:39.68][01:46.34][00:39.63]独自走下长坂坡 月光太温柔  
  70. [02:43.20][01:49.82][00:43.15]曹操不啰嗦 一心要那荆州  
  71. [02:46.75][01:53.48][00:46.83]用阴谋 阳谋 明说 暗夺的摸  
  72. [02:53.44][02:00.10][00:53.50]东汉末年分三国  
  73. [02:56.37][02:03.15][00:56.52]烽火连天不休  
  74. [03:00.12][02:06.75][01:00.17]儿女情长 被乱世左右  
  75. [03:05.04][02:11.71][01:05.12]谁来煮酒  
  76. [03:06.78][02:13.45][01:06.84]尔虞我诈是三国  
  77. [03:09.85][02:16.43][01:09.73]说不清对与错  
  78. [03:13.38][02:20.11][01:13.48]纷纷扰扰 千百年以後  
  79. [03:18.44][02:25.06][01:18.45]一切又从头  
  80. [03:25.99][02:30.17][01:26.81]喔……  
  81. [88:88:88]  
  82. </textarea>  
  83. <div id="jquery_jplayer_1" class="jp-jplayer"></div>  
  84. <div id="jp_container_1" class="jp-audio">  
  85.     <div class="jp-type-single">  
  86.         <div class="jp-gui jp-interface">  
  87.             <ul class="jp-controls">  
  88.                 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>  
  89.                 <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>  
  90.                 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>  
  91.                 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>  
  92.                 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>  
  93.                 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>  
  94.             </ul>  
  95.             <div class="jp-progress">  
  96.                 <div class="jp-seek-bar">  
  97.                     <div class="jp-play-bar"></div>  
  98.   
  99.                 </div>  
  100.             </div>  
  101.             <div class="jp-volume-bar">  
  102.                 <div class="jp-volume-bar-value"></div>  
  103.             </div>  
  104.             <div class="jp-current-time"></div>  
  105.             <div class="jp-duration"></div>  
  106.             <ul class="jp-toggles">  
  107.                 <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>  
  108.                 <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>  
  109.             </ul>  
  110.         </div>  
  111.         <div class="jp-details">  
  112.             <ul>  
  113.                 <li><span class="jp-title"></span></li>  
  114.             </ul>  
  115.         </div>  
  116.         <div class="jp-no-solution">  
  117.             <span>Update Required</span>  
  118.             To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.  
  119.         </div>  
  120.     </div>  
  121. </div>  
  122.   
  123. <div class="content">  
  124.     <ul id="lrc_list">  
  125.         加载歌词……  
  126.     </ul>  
  127. </div>  
  128. </body>  
  129. </html>  

 

6、最后还是要提供下载地址：

微云下载歌词同步插件  （密码：LSm1）

csdn 下载：http://download.csdn.net/detail/wk313753744/7803013

Jplayer歌词同步显示插件

标签：

原文地址：http://www.cnblogs.com/jixu8/p/4313091.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！