Jplayer歌词同步显示插件(在以前别人基础上修改)

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_list"的样式就行-->

<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