Jplayer歌词同步显示插件(修正IOS兼容问题)

026850

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

20140822162843773

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

  • <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  • <link href=“skin/pink.flag/jplayer.pink.flag.css” rel=“stylesheet” type=“text/css” />
  • <script type=“text/javascript” src=“js/jquery-1.8.2.min.js”></script>
  • <script type=“text/javascript” src=“js/jquery.jplayer.min.js”></script>
  • <script type=“text/javascript” src=“js/jquery.jplayer.lyric.js”></script>

 

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

  1. *修改内容说明：在原有基础上，需要使用start方法才能加载歌词，改进之后，在加载jplayer之前调用,显示歌词
  2. */
  3. (function($){
  4.     $.lrc = {
  5.         handle: null, /* 定时执行句柄 */
  6.         list: [], /* lrc歌词及时间轴数组 */
  7.         regex: /^[^
    ]∗((?:\s∗\[\d+\d+(?:\.\d+)?

    )+)([\s\S]*)$/, /* 提取歌词内容行 */

  8.         regex_time: /
    (\d+)((?:\d+)(?:\.\d+)?)

    /g, /* 提取歌词时间轴 */

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

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

  1. //修改说明，修改了IOS10以上的兼容问题，歌词初始化不加载的问题。
  2. var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  3. $(document).ready(function(){
  4.     $(“#jquery_jplayer_1”).jPlayer({
  5.         ready: function () {
  6.             //初始化歌词信息(传入歌词文件文本)
  7.             $.lrc.init($(‘#lrc_content’).val());
  8.             $(this).jPlayer(“setMedia”, {
  9.                 title: “Bubble”,
  10.                 mp3: “mp3/林俊杰 – 曹操.mp3”
  11.             }).jPlayer(“play”);
  12.         },
  13.         timeupdate: function(event) {
  14.              if(event.jPlayer.status.currentTime==0){
  15.                 if(isiOS==true){
    time = 0;
    }else{
    time = “”;
    }
  16.              }else {
  17.                 time = event.jPlayer.status.currentTime;
  18.              }
  19.         },
  20.         play: function(event) {
  21.             //点击开始方法调用lrc.start歌词方法 返回时间time
  22.             if($(‘#lrc_content’).val()!==””){
  23.                 $.lrc.start(function(){
  24.                     return time;
  25.                 });
  26.             }else{
  27.              $(“.content”).html(“没有字幕”);
  28.             }
  29.         },
  30.         swfPath: “js”,
  31.         supplied: “mp3”,
  32.         wmode: “window”,
  33.         smoothPlayBar: true,
  34.         keyEnabled: true,
  35.         remainingDuration: true,
  36.         toggleDuration: true
  37.     });
  38. });

 

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>完整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. var u = navigator.userAgent;
  19. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  20. $(document).ready(function(){
  21.     $(“#jquery_jplayer_1”).jPlayer({
  22.         ready: function () {
  23.             //初始化歌词信息(传入歌词文件文本)
  24.             $.lrc.init($(‘#lrc_content’).val());
  25.             $(this).jPlayer(“setMedia”, {
  26.                 title: “Bubble”,
  27.                 mp3: “mp3/林俊杰 – 曹操.mp3”
  28.             }).jPlayer(“play”);
  29.         },
  30.         timeupdate: function(event) {
  31.              if(event.jPlayer.status.currentTime==0){
  32.                     if(isiOS==true){
    time = 0;
    }else{
    time = “”;
    }
  34.              }else {
  35.                 time = event.jPlayer.status.currentTime;
  36.              }
  37.         },
  38.         play: function(event) {
  39.             //点击开始方法调用lrc.start歌词方法 返回时间time
  40.             if($(‘#lrc_content’).val()!==””){
  41.                 $.lrc.start(function(){
  42.                     return time;
  43.                 });
  44.             }else{
  45.              $(“.content”).html(“没有字幕”);
  46.             }
  47.         },
  48.         swfPath: “js”,
  49.         supplied: “mp3”,
  50.         wmode: “window”,
  51.         smoothPlayBar: true,
  52.         keyEnabled: true,
  53.         remainingDuration: true,
  54.         toggleDuration: true
  55.     });
  56. });
  57. //]]>
  58. </script>
  59. </head>
  60. <body>
  61. <!–textarea只是用来存储歌词信息 并不做显示，如果要修改显示样式，修改id=”lrc_list”的样式就行–>
  62. <textarea id=“lrc_content” style=“display:none;”>
  63. [ti:曹操]
  64. [ar:林俊杰]
  65. [al:曹操]
  66. [00:00.03]林俊杰-《曹操》
  67. [00:13.35]作词：林秋离
  68. [00:20.12]作曲：林俊杰
  69. [00:25.32]
  70. [01:33.46][00:26.82]不是英雄 不读三国
  71. [01:40.12][00:33.43]若是英雄 怎么能不懂寂寞
  72. [02:39.68][01:46.34][00:39.63]独自走下长坂坡 月光太温柔
  73. [02:43.20][01:49.82][00:43.15]曹操不啰嗦 一心要那荆州
  74. [02:46.75][01:53.48][00:46.83]用阴谋 阳谋 明说 暗夺的摸
  75. [02:53.44][02:00.10][00:53.50]东汉末年分三国
  76. [02:56.37][02:03.15][00:56.52]烽火连天不休
  77. [03:00.12][02:06.75][01:00.17]儿女情长 被乱世左右
  78. [03:05.04][02:11.71][01:05.12]谁来煮酒
  79. [03:06.78][02:13.45][01:06.84]尔虞我诈是三国
  80. [03:09.85][02:16.43][01:09.73]说不清对与错
  81. [03:13.38][02:20.11][01:13.48]纷纷扰扰 千百年以後
  82. [03:18.44][02:25.06][01:18.45]一切又从头
  83. [03:25.99][02:30.17][01:26.81]喔……
  84. [88:88:88]
  85. </textarea>
  86. <div id=“jquery_jplayer_1” class=“jp-jplayer”></div>
  87. <div id=“jp_container_1” class=“jp-audio”>
  88.     <div class=“jp-type-single”>
  89.         <div class=“jp-gui jp-interface”>
  90.             <ul class=“jp-controls”>
  91.                 <li><a href=“javascript:;” class=“jp-play” tabindex=“1”>play</a></li>
  92.                 <li><a href=“javascript:;” class=“jp-pause” tabindex=“1”>pause</a></li>
  93.                 <li><a href=“javascript:;” class=“jp-stop” tabindex=“1”>stop</a></li>
  94.                 <li><a href=“javascript:;” class=“jp-mute” tabindex=“1” title=“mute”>mute</a></li>
  95.                 <li><a href=“javascript:;” class=“jp-unmute” tabindex=“1” title=“unmute”>unmute</a></li>
  96.                 <li><a href=“javascript:;” class=“jp-volume-max” tabindex=“1” title=“max volume”>max volume</a></li>
  97.             </ul>
  98.             <div class=“jp-progress”>
  99.                 <div class=“jp-seek-bar”>
  100.                     <div class=“jp-play-bar”></div>
  102.                 </div>
  103.             </div>
  104.             <div class=“jp-volume-bar”>
  105.                 <div class=“jp-volume-bar-value”></div>
  106.             </div>
  107.             <div class=“jp-current-time”></div>
  108.             <div class=“jp-duration”></div>
  109.             <ul class=“jp-toggles”>
  110.                 <li><a href=“javascript:;” class=“jp-repeat” tabindex=“1” title=“repeat”>repeat</a></li>
  111.                 <li><a href=“javascript:;” class=“jp-repeat-off” tabindex=“1” title=“repeat off”>repeat off</a></li>
  112.             </ul>
  113.         </div>
  114.         <div class=“jp-details”>
  115.             <ul>
  116.                 <li><span class=“jp-title”></span></li>
  117.             </ul>
  118.         </div>
  119.         <div class=“jp-no-solution”>
  120.             <span>Update Required</span>
  121.             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>.
  122.         </div>
  123.     </div>
  124. </div>
  126. <div class=“content”>
  127.     <ul id=“lrc_list”>
  128.         加载歌词……
  129.     </ul>
  130. </div>
  131. </body>
  132. </html>

 

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
jquery
喜欢就支持一下吧
点赞0
分享
相关推荐
评论 抢沙发

请登录后发表评论

搜索
开启精彩搜索
HTML5 classList操作类名属性简介-易微帮博客

HTML5 classList操作类名属性简介

HTML5/CSS3
宇凡的头像-易微帮博客3年前
039.6W+0
PHP中private、public、protected的详细介绍-易微帮博客

PHP中private、public、protected的详细介绍

php
宇凡的头像-易微帮博客3年前
34.6W+0
HTML5当众 <a>标签rel属性详解-易微帮博客

HTML5当众 标签rel属性详解

随笔
宇凡的头像-易微帮博客11月前
019.7W+5
Thinkphp内核虚拟资源素材源码交易下载平台网站源码-易微帮博客

Thinkphp内核虚拟资源素材源码交易下载平台网站源码

THINKPHP
宇凡的头像-易微帮博客4年前
014.6W+0
jquery实现返回顶部的效果-易微帮博客

jquery实现返回顶部的效果

jquery
宇凡的头像-易微帮博客3年前
014.6W+0
wordpress主题 Storeys V1.0.0免费资源下载站响应式主题模板-易微帮博客

wordpress主题 Storeys V1.0.0免费资源下载站响应式主题模板

WORDPRESS精品资源
宇凡的头像-易微帮博客4年前
08.9W+0
热门re

分类

高质量的外部链接项目分享项目非微信浏览器支付陌生人成交法闲鱼拉单闲鱼免费引流闲鱼优质商品闲鱼销售套路邮件营销邮件运镜拍摄软文营销软文写作软件转换越努力越贫穷赚钱的秘密赚快钱