zoukankan      html  css  js  c++  java

  • Jplayer歌词同步显示插件

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

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

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    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在CODE上查看代码片派生到我的代码片
     
    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+)?
      )+)([sS]*)$/, /* 提取歌词内容行 */  
    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(" ");  
    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在CODE上查看代码片派生到我的代码片
     
    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在CODE上查看代码片派生到我的代码片
     
    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{ 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
  • 相关阅读:
    ES基本原理
    docker技术基础
    docker简介
    IaaS,PaaS和SaaS
    python的type和object
    django：一个RESTfull的接口从wsgi到函数的历程
    python的list内存分配算法
    10个我最喜欢问程序员的面试问题
    月薪三万的面试题
    深圳有趣网络笔试题面试题
  • 原文地址：https://www.cnblogs.com/jixu8/p/4313091.html
Copyright © 2011-2022 走看看