生活随笔
收集整理的這篇文章主要介紹了
Jplayer歌词同步显示插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
http://blog.csdn.net/wk313753744/article/details/38758317
?
1、該插件是一個jquery的編寫的跟jplayer實現歌詞同步的插件，最終效果如圖：
?
2、首先引入jplayer的相關的js庫和樣式文件。
?
?
[html]?view plaincopy
<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文件貼出來，以備以后不能下載的朋友參考實現：
?
?
[html]?view plaincopy
/*****??*原作mp3player.duapp.com??*修改?：王坤??*QQ群:151013733??*修改內容說明：在原有基礎上，需要使用start方法才能加載歌詞，改進之后，在加載jplayer之前調用,顯示歌詞??*/??(function($){??????$.lrc?=?{??????????handle:?null,?/*?定時執行句柄?*/??????????list:?[],?/*?lrc歌詞及時間軸數組?*/??????????regex:?/^[^ ]?((?:\s?\[\d+\d+(?:\.\d+)? )+)([\s\S]*)$/,?/*?提取歌詞內容行?*/??????????regex_time:?/ (\d+)((?:\d+)(?:\.\d+)?) /g,?/*?提取歌詞時間軸?*/??????????regex_trim:?/^\s+|\s+$/,?/*?過濾兩邊空格?*/??????????callback:?null,?/*?定時獲取歌曲執行時間回調函數?*/??????????interval:?0.3,?/*?定時刷新時間，單位：秒?*/??????????format:?'<li>{html}</li>',?/*?模板?*/??????????prefixid:?'lrc',?/*?容器ID?*/??????????hoverClass:?'hover',?/*?選中節點的className?*/??????????hoverTop:?100,?/*?當前歌詞距離父節點的高度?*/??????????duration:?0,?/*?歌曲回調函數設置的進度時間?*/??????????__duration:?-1,?/*?當前歌曲進度時間?*/??????????hasLrc:0,/**記錄是否有歌詞標記**/??????????//初始化歌詞???????????init:?function(txt){??????????if(typeof(txt)?!=?'string'?||?txt.length?<?1)?return;??????????????/*?停止前面執行的歌曲?*/??????????????this.stop();??????????????var?item?=?null,?item_time?=?null,?html?=?'';??????????????/*?分析歌詞的時間軸和內容?*/??????????????//先按行拆分歌詞??????????????txt?=?txt.split("\n");??????????????//對拆分的每行進行提取時間和歌詞內容??????????????for(var?i?=?0;?i?<?txt.length;?i++)?{??????????????????//獲取一行并去掉兩端的空格?[00:11.38]如果你眼神能夠為我片刻的降臨??????????????????item?=?txt[i].replace(this.regex_trim,?'');??????????????????//然后取出歌詞信息??????????????????if(item.length?<?1?||?!(item?=?this.regex.exec(item)))?continue;??????????????????while(item_time?=?this.regex_time.exec(item[1]))?{??????????????????????this.list.push([parseFloat(item_time[1])*60+parseFloat(item_time[2]),?item[2]]);??????????????????}??????????????????this.regex_time.lastIndex?=?0;??????????????}??????????????/*?有效歌詞?*/??????????????if(this.list.length?>?0)?{??????????????????this.hasLrc?=1;??????????????????/*?對時間軸排序?*/??????????????????this.list.sort(function(a,b){?return?a[0]-b[0];?});??????????????????if(this.list[0][0]?>=?0.1)?this.list.unshift([this.list[0][0]-0.1,?'']);??????????????????this.list.push([this.list[this.list.length-1][0]+1,?'']);??????????????????for(var?i?=?0;?i?<?this.list.length;?i++)??????????????????????html?+=?this.format.replace(/\{html\}/gi,?this.list[i][1]);??????????????????/*?賦值到指定容器?*/??????????????????$('#'+this.prefixid+'_list').html(html).animate({?marginTop:?0?},?100).show();??????????????????/*?隱藏沒有歌詞的層?*/??????????????????$('#'+this.prefixid+'_nofound').hide();??????????????????/*?定時調用回調函數，監聽歌曲進度?*/??????????????????//this.handle?=?setInterval('$.lrc.jump($.lrc.callback());',?this.interval*1000);??????????????}else{?/*?沒有歌詞?*/??????????????????this.hasLrc?=0;??????????????????$('#'+this.prefixid+'_list').hide();??????????????????$('#'+this.prefixid+'_nofound').show();??????????????}??????????},??????????/*?歌詞開始自動匹配?跟時間軸對應?*/??????????/**callback時間?jplayer的當前播放時間**/??????????start:?function(callback)?{??????????????this.callback?=?callback;??????????????/*?有歌詞則跳轉到歌詞時間軸?*/??????????????if(this.hasLrc?==?1)?{??????????????????this.handle?=?setInterval('$.lrc.jump($.lrc.callback());',?this.interval*1000);??????????????}??????????},??????????/*?跳到指定時間的歌詞?*/??????????jump:?function(duration)?{??????????????if(typeof(this.handle)?!=?'number'?||?typeof(duration)?!=?'number'?||?!$.isArray(this.list)?||?this.list.length?<?1)?return?this.stop();?????????????????if(duration?<?0)?duration?=?0;??????????????if(this.__duration?==?duration)?return;??????????????duration?+=?0.2;??????????????this.__duration?=?duration;??????????????duration?+=?this.interval;?????????????????var?left?=?0,?right?=?this.list.length-1,?last?=?right??????????????????pivot?=?Math.floor(right/2),??????????????????tmpobj?=?null,?tmp?=?0,?thisobj?=?this;?????????????????/*?二分查找?*/??????????????while(left?<=?pivot?&&?pivot?<=?right)?{??????????????????if(this.list[pivot][0]?<=?duration?&&?(pivot?==?right?||?duration?<?this.list[pivot+1][0]))?{??????????????????????//if(pivot?==?right)?this.stop();??????????????????????break;??????????????????}else?if(?this.list[pivot][0]?>?duration?)?{?/*?left?*/??????????????????????right?=?pivot;??????????????????}else{?/*?right?*/??????????????????????left?=?pivot;??????????????????}??????????????????tmp?=?left?+?Math.floor((right?-?left)/2);??????????????????if(tmp?==?pivot)?break;??????????????????pivot?=?tmp;??????????????}?????????????????if(pivot?==?this.pivot)?return;??????????????this.pivot?=?pivot;??????????????tmpobj?=?$('#'+this.prefixid+'_list').children().removeClass(this.hoverClass).eq(pivot).addClass(thisobj.hoverClass);??????????????tmp?=?tmpobj.next().offset().top-tmpobj.parent().offset().top?-?this.hoverTop;??????????????tmp?=?tmp?>?0???tmp?*?-1?:?0;??????????????this.animata(tmpobj.parent()[0]).animate({marginTop:?tmp?+?'px'},?this.interval*1000);??????????},??????????/*?停止執行歌曲?*/??????????stop:?function()?{??????????????if(typeof(this.handle)?==?'number')?clearInterval(this.handle);??????????????this.handle?=?this.callback?=?null;??????????????this.__duration?=?-1;??????????????this.regex_time.lastIndex?=?0;??????????????this.list?=?[];??????????},??????????animata:?function(elem)?{??????????????var?f?=?j?=?0,?callback,?_this={},??????????????????tween?=?function(t,b,c,d){?return?-c*(t/=d)*(t-2)?+?b;?}??????????????_this.execution?=?function(key,?val,?t)?{??????????????????var?s?=?(new?Date()).getTime(),?d?=?t?||?500,??????????????????????b?=?parseInt(elem.style[key])?||?0,??????????????????????c?=?val-b;??????????????????(function(){??????????????????????var?t?=?(new?Date()).getTime()?-?s;??????????????????????if(t>d){??????????????????????????t=d;??????????????????????????elem.style[key]?=?tween(t,b,c,d)?+?'px';??????????????????????????++f?==?j?&&?callback?&&?callback.apply(elem);??????????????????????????return?true;??????????????????????}??????????????????????elem.style[key]?=?tween(t,b,c,d)+'px';??????????????????????setTimeout(arguments.callee,?10);??????????????????})();??????????????}??????????????_this.animate?=?function(sty,?t,?fn){??????????????????callback?=?fn;??????????????????for(var?i?in?sty){??????????????????????j++;??????????????????????_this.execution(i,parseInt(sty[i]),t);??????????????????}??????????????}??????????????return?_this;??????????}??????};??})(jQuery);??
4、在jplayer初始化中使用如下：
?
?
[html]?view plaincopy
$(document).ready(function(){??????$("#jquery_jplayer_1").jPlayer({??????????ready:?function?()?{??????????????//初始化歌詞信息(傳入歌詞文件文本)??????????????$.lrc.init($('#lrc_content').val());??????????????$(this).jPlayer("setMedia",?{??????????????????title:?"Bubble",??????????????????mp3:?"mp3/林俊杰?-?曹操.mp3"??????????????}).jPlayer("play");??????????},??????????timeupdate:?function(event)?{???????????????if(event.jPlayer.status.currentTime==0){??????????????????time?=?"";???????????????}else?{??????????????????time?=?event.jPlayer.status.currentTime;???????????????}??????????},??????????play:?function(event)?{??????????????//點擊開始方法調用lrc.start歌詞方法?返回時間time??????????????if($('#lrc_content').val()!==""){??????????????????$.lrc.start(function(){??????????????????????return?time;??????????????????});??????????????}else{???????????????$(".content").html("沒有字幕");??????????????}??????????},??????????swfPath:?"js",??????????supplied:?"mp3",??????????wmode:?"window",??????????smoothPlayBar:?true,??????????keyEnabled:?true,??????????remainingDuration:?true,??????????toggleDuration:?true??????});??});?? ?
5、這一步不是必要的 只是提供一個我的源碼給你們參考：
?
[html]?view plaincopy
<!DOCTYPE?HTML>??<html>??<head>??<title>QQ群：845885222?完整jplayer歌詞同步demo</title>??<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>??<style?type="text/css">??*{?margin:0;?padding:0;?}??ul,?ol,?dl?{?list-style:none;?}??.content?li.hover{color:red;?}??.content{?width:200px;overflow:hidden;padding:10px;?text-align:?center;?font-size:12px;}??</style>??<script?type="text/javascript">??//<![CDATA[?$(document).ready(function(){?????$("#jquery_jplayer_1").jPlayer({?????????ready:?function?()?{?????????????//初始化歌詞信息(傳入歌詞文件文本)?????????????$.lrc.init($('#lrc_content').val());?????????????$(this).jPlayer("setMedia",?{?????????????????title:?"Bubble",?????????????????mp3:?"mp3/林俊杰?-?曹操.mp3"?????????????}).jPlayer("play");?????????},?????????timeupdate:?function(event)?{??????????????if(event.jPlayer.status.currentTime==0){?????????????????time?=?"";??????????????}else?{?????????????????time?=?event.jPlayer.status.currentTime;??????????????}?????????},?????????play:?function(event)?{?????????????//點擊開始方法調用lrc.start歌詞方法?返回時間time?????????????if($('#lrc_content').val()!==""){?????????????????$.lrc.start(function(){?????????????????????return?time;?????????????????});?????????????}else{??????????????$(".content").html("沒有字幕");?????????????}?????????},?????????swfPath:?"js",?????????supplied:?"mp3",?????????wmode:?"window",?????????smoothPlayBar:?true,?????????keyEnabled:?true,?????????remainingDuration:?true,?????????toggleDuration:?true?????});?});?//]]>??</script>??</head>??<body>??<textarea?id="lrc_content"?style="display:none;">??[ti:曹操]??[ar:林俊杰]??[al:曹操]??[00:00.03]林俊杰-《曹操》??[00:13.35]作詞：林秋離??[00:20.12]作曲：林俊杰??[00:25.32]??[01:33.46][00:26.82]不是英雄?不讀三國??[01:40.12][00:33.43]若是英雄?怎么能不懂寂寞??[02:39.68][01:46.34][00:39.63]獨自走下長坂坡?月光太溫柔??[02:43.20][01:49.82][00:43.15]曹操不啰嗦?一心要那荊州??[02:46.75][01:53.48][00:46.83]用陰謀?陽謀?明說?暗奪的摸??[02:53.44][02:00.10][00:53.50]東漢末年分三國??[02:56.37][02:03.15][00:56.52]烽火連天不休??[03:00.12][02:06.75][01:00.17]兒女情長?被亂世左右??[03:05.04][02:11.71][01:05.12]誰來煮酒??[03:06.78][02:13.45][01:06.84]爾虞我詐是三國??[03:09.85][02:16.43][01:09.73]說不清對與錯??[03:13.38][02:20.11][01:13.48]紛紛擾擾?千百年以後??[03:18.44][02:25.06][01:18.45]一切又從頭??[03:25.99][02:30.17][01:26.81]喔……??[88:88:88]??</textarea>??<div?id="jquery_jplayer_1"?class="jp-jplayer"></div>??<div?id="jp_container_1"?class="jp-audio">??????<div?class="jp-type-single">??????????<div?class="jp-gui?jp-interface">??????????????<ul?class="jp-controls">??????????????????<li><a?href="javascript:;"?class="jp-play"?tabindex="1">play</a></li>??????????????????<li><a?href="javascript:;"?class="jp-pause"?tabindex="1">pause</a></li>??????????????????<li><a?href="javascript:;"?class="jp-stop"?tabindex="1">stop</a></li>??????????????????<li><a?href="javascript:;"?class="jp-mute"?tabindex="1"?title="mute">mute</a></li>??????????????????<li><a?href="javascript:;"?class="jp-unmute"?tabindex="1"?title="unmute">unmute</a></li>??????????????????<li><a?href="javascript:;"?class="jp-volume-max"?tabindex="1"?title="max?volume">max?volume</a></li>??????????????</ul>??????????????<div?class="jp-progress">??????????????????<div?class="jp-seek-bar">??????????????????????<div?class="jp-play-bar"></div>????????????????????</div>??????????????</div>??????????????<div?class="jp-volume-bar">??????????????????<div?class="jp-volume-bar-value"></div>??????????????</div>??????????????<div?class="jp-current-time"></div>??????????????<div?class="jp-duration"></div>??????????????<ul?class="jp-toggles">??????????????????<li><a?href="javascript:;"?class="jp-repeat"?tabindex="1"?title="repeat">repeat</a></li>??????????????????<li><a?href="javascript:;"?class="jp-repeat-off"?tabindex="1"?title="repeat?off">repeat?off</a></li>??????????????</ul>??????????</div>??????????<div?class="jp-details">??????????????<ul>??????????????????<li><span?class="jp-title"></span></li>??????????????</ul>??????????</div>??????????<div?class="jp-no-solution">??????????????<span>Update?Required</span>??????????????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>.??????????</div>??????</div>??</div>????<div?class="content">??????<ul?id="lrc_list">??????????加載歌詞……??????</ul>??</div>??</body>??</html>?? ?
6、最后還是要提供下載地址：
微云下載歌詞同步插件??（密碼：LSm1）
csdn 下載：http://download.csdn.net/detail/wk313753744/7803013
轉載于:https://www.cnblogs.com/jixu8/p/4313091.html
總結
以上是生活随笔為你收集整理的Jplayer歌词同步显示插件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
