|
|
@@ -35,195 +35,209 @@
|
|
|
* ========================================================== */
|
|
|
|
|
|
(function($) {
|
|
|
- var gtime=0;
|
|
|
+ var gtime = 0;
|
|
|
var lyric_listener;
|
|
|
$.fn.jqlyric = function(options) {
|
|
|
- var opts = $.extend({}, $.fn.jqlyric.defaults, options);
|
|
|
+ var opts = $.extend({},
|
|
|
+ $.fn.jqlyric.defaults, options);
|
|
|
|
|
|
- return this.each(function(){
|
|
|
- var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
|
|
|
- var $this=$(this);
|
|
|
-
|
|
|
- var arrLyric=new Array(); //放存汉字的歌词
|
|
|
- var arrTime=new Array(); //存放时间
|
|
|
- var currentLine=0; //当前活动的歌词行号
|
|
|
+ return this.each(function() {
|
|
|
+ var o = $.meta ? $.extend({},
|
|
|
+ opts, $this.data()) : opts;
|
|
|
+ var $this = $(this);
|
|
|
|
|
|
+ var arrLyric = new Array(); //放存汉字的歌词
|
|
|
+ var arrTime = new Array(); //存放时间
|
|
|
+ var currentLine = 0; //当前活动的歌词行号
|
|
|
// 开始解析歌词
|
|
|
//将歌词解析成数组
|
|
|
- var arrly=o.lyric.split('\n');console.log(arrly);
|
|
|
-
|
|
|
- for(var i=0;i<arrly.length;i++){
|
|
|
- var str=arrly[i];
|
|
|
- str=str.substring(str.indexOf("[")+1,str.indexOf("]"));
|
|
|
-
|
|
|
- if(str.indexOf('ti:')>-1||str.indexOf('ar:')>-1||str.indexOf('al:')>-1||str.indexOf('by:')>-1){
|
|
|
- // 歌曲特征字段
|
|
|
- var tmp=str.substring(str.indexOf(':')+1);
|
|
|
- var text=tmp;
|
|
|
- //tag=tag.replace(/([ti|ar|al|by])/g,'');
|
|
|
- //arrLyric.push(tag+text);
|
|
|
- //arrTime.push(toSeconds('00:00:00')); //
|
|
|
- }else{
|
|
|
- var text=arrly[i].substring(arrly[i].indexOf("]")+1);
|
|
|
- //if(text==''){text=' ';}
|
|
|
- arrLyric.push(text); //放歌词
|
|
|
- arrTime.push(toSeconds(str)); //放时间
|
|
|
- }
|
|
|
+ var arrly = o.lyric.split('\n'); //console.log(arrly);
|
|
|
+ for (var i = 0; i < arrly.length; i++) {
|
|
|
+ var str = arrly[i];
|
|
|
+ str = str.substring(str.indexOf("[") + 1, str.indexOf("]"));
|
|
|
+
|
|
|
+ if (str.indexOf('ti:') > -1 || str.indexOf('ar:') > -1 || str.indexOf('al:') > -1 || str.indexOf('by:') > -1) {
|
|
|
+ // 歌曲特征字段
|
|
|
+ var tmp = str.substring(str.indexOf(':') + 1);
|
|
|
+ var text = tmp;
|
|
|
+ //tag=tag.replace(/([ti|ar|al|by])/g,'');
|
|
|
+ //arrLyric.push(tag+text);
|
|
|
+ //arrTime.push(toSeconds('00:00:00')); //
|
|
|
+ } else {
|
|
|
+ var text = arrly[i].substring(arrly[i].indexOf("]") + 1);
|
|
|
+ //if(text==''){text=' ';}
|
|
|
+ arrLyric.push(text); //放歌词
|
|
|
+ arrTime.push(toSeconds(str)); //放时间
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 所有歌词按时间顺序排列
|
|
|
- for(var k=0;k<arrTime.length;k++){
|
|
|
- for(var j=0;j<arrTime.length-k;j++){
|
|
|
- if(arrTime[j]>arrTime[j+1]){
|
|
|
- temp=arrTime[j];
|
|
|
- arrTime[j]=arrTime[j+1];
|
|
|
- arrTime[j+1]=temp;
|
|
|
-
|
|
|
- temp=arrLyric[j];
|
|
|
- arrLyric[j]=arrLyric[j+1];
|
|
|
- arrLyric[j+1]=temp;
|
|
|
+ for (var k = 0; k < arrTime.length; k++) {
|
|
|
+ for (var j = 0; j < arrTime.length - k; j++) {
|
|
|
+ if (arrTime[j] > arrTime[j + 1]) {
|
|
|
+ temp = arrTime[j];
|
|
|
+ arrTime[j] = arrTime[j + 1];
|
|
|
+ arrTime[j + 1] = temp;
|
|
|
+
|
|
|
+ temp = arrLyric[j];
|
|
|
+ arrLyric[j] = arrLyric[j + 1];
|
|
|
+ arrLyric[j + 1] = temp;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- var arrLyricObj=new Array();
|
|
|
- for(var k=0;k<arrTime.length;k++){
|
|
|
- var lrcContent=arrLyric[k];
|
|
|
- var len=lrcContent.replace(/(^s*)|(s*$)/g, "").length;//console.log(lrcContent.charCodeAt(0).toString(16));
|
|
|
- if(!lrcContent|| len==0){
|
|
|
- continue;
|
|
|
- }
|
|
|
- var timeStart=arrTime[k];
|
|
|
- var timeEnd=k<arrTime.length-1?arrTime[k+1]-0.01:99999999999999;
|
|
|
- if(timeEnd<0){
|
|
|
- continue;
|
|
|
- }
|
|
|
-
|
|
|
- var lrc={timeStart:timeStart,timeEnd:timeEnd,lrcContent:lrcContent};
|
|
|
- arrLyricObj.push(lrc);
|
|
|
- }
|
|
|
-
|
|
|
+ var arrLyricObj = new Array();
|
|
|
+ for (var k = 0; k < arrTime.length; k++) {
|
|
|
+ var lrcContent = arrLyric[k];
|
|
|
+ var len = lrcContent.replace(/(^s*)|(s*$)/g, "").length; //console.log(lrcContent.charCodeAt(0).toString(16));
|
|
|
+ if (!lrcContent || len == 0) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ var timeStart = arrTime[k];
|
|
|
+ var timeEnd = k < arrTime.length - 1 ? arrTime[k + 1] - 0.01 : 99999999999999;
|
|
|
+ if (timeEnd < 0) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+
|
|
|
+ var lrc = {
|
|
|
+ timeStart: timeStart,
|
|
|
+ timeEnd: timeEnd,
|
|
|
+ lrcContent: lrcContent
|
|
|
+ };
|
|
|
+ arrLyricObj.push(lrc);
|
|
|
+ }
|
|
|
+
|
|
|
clearTimeout(lyric_listener);
|
|
|
- var fadeFinish=true;
|
|
|
- var timeFun=function (){ // 定时检查当前播放进度,作出滚动动作
|
|
|
- var pos=o.getPosition();
|
|
|
- for(var k=0;k<arrLyricObj.length;k++){
|
|
|
- if(pos>=arrLyricObj[k].timeStart&&pos<=arrLyricObj[k].timeEnd){
|
|
|
- if($("#line-current").attr("currentLine")!=k&&fadeFinish){
|
|
|
- if(k>0){
|
|
|
- $("#line-last span").fadeOut(400,function(){
|
|
|
- var lc=arrLyricObj[k-1].lrcContent.split("<br/>");
|
|
|
- $("#line-last span:eq(0)").text(lc[0]);
|
|
|
- if(lc.length>1){
|
|
|
- $("#line-last span:eq(1)").text(lc[1]);
|
|
|
- }
|
|
|
- $("#line-last").attr("currentLine",k);
|
|
|
- $("#line-last span").fadeIn(400,function(){
|
|
|
- fadeFinish=true;
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- if(k<arrTime.length-1){
|
|
|
- $("#line-next span").fadeOut(400,function(){
|
|
|
- var lc=arrLyricObj[k+1].lrcContent.split("<br/>");
|
|
|
- $("#line-next span:eq(0)").text(lc[0]);
|
|
|
- if(lc.length>1){
|
|
|
- $("#line-next span:eq(1)").text(lc[1]);
|
|
|
- }
|
|
|
- $("#line-next").attr("currentLine",k);
|
|
|
- $("#line-next span").fadeIn(400,function(){
|
|
|
- fadeFinish=true;
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- fadeFinish=false;
|
|
|
- $("#line-current span").fadeOut(400,function(){
|
|
|
- var lc=arrLyricObj[k].lrcContent.split("<br/>");
|
|
|
- $("#line-current span:eq(0)").text(lc[0]);
|
|
|
- if(lc.length>1){
|
|
|
- $("#line-current span:eq(1)").text(lc[1]);
|
|
|
- }
|
|
|
- $("#line-current").attr("currentLine",k);
|
|
|
- $("#line-current span").fadeIn(400,function(){
|
|
|
- fadeFinish=true;
|
|
|
- });
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- lyric_listener=setTimeout(timeFun,o.speed);
|
|
|
+ var fadeFinish = true;
|
|
|
+ var timeFun = function() { // 定时检查当前播放进度,作出滚动动作
|
|
|
+ var pos = o.getPosition();
|
|
|
+ for (var k = 0; k < arrLyricObj.length; k++) {
|
|
|
+ if (pos >= arrLyricObj[k].timeStart && pos <= arrLyricObj[k].timeEnd) {
|
|
|
+ if ($("#line-current").attr("currentLine") != k && fadeFinish) {
|
|
|
+ if (k > 0) {
|
|
|
+ $("#line-last span").fadeOut(400,
|
|
|
+ function() {
|
|
|
+ var lc = arrLyricObj[k - 1].lrcContent.split("<br/>");
|
|
|
+ $("#line-last span:eq(0)").text(lc[0]);
|
|
|
+ if (lc.length > 1) {
|
|
|
+ $("#line-last span:eq(1)").text(lc[1]);
|
|
|
+ }
|
|
|
+ $("#line-last").attr("currentLine", k);
|
|
|
+ $("#line-last span").fadeIn(400,
|
|
|
+ function() {
|
|
|
+ fadeFinish = true;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (k < arrTime.length - 1) {
|
|
|
+ $("#line-next span").fadeOut(400,
|
|
|
+ function() {
|
|
|
+ var lc = arrLyricObj[k + 1].lrcContent.split("<br/>");
|
|
|
+ $("#line-next span:eq(0)").text(lc[0]);
|
|
|
+ if (lc.length > 1) {
|
|
|
+ $("#line-next span:eq(1)").text(lc[1]);
|
|
|
+ }
|
|
|
+ $("#line-next").attr("currentLine", k);
|
|
|
+ $("#line-next span").fadeIn(400,
|
|
|
+ function() {
|
|
|
+ fadeFinish = true;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ fadeFinish = false;
|
|
|
+ $("#line-current span").fadeOut(400,
|
|
|
+ function() {
|
|
|
+ var lc = arrLyricObj[k].lrcContent.split("<br/>");
|
|
|
+ $("#line-current span:eq(0)").text(lc[0]);
|
|
|
+ if (lc.length > 1) {
|
|
|
+ $("#line-current span:eq(1)").text(lc[1]);
|
|
|
+ }
|
|
|
+ $("#line-current").attr("currentLine", k);
|
|
|
+ $("#line-current span").fadeIn(400,
|
|
|
+ function() {
|
|
|
+ fadeFinish = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ lyric_listener = setTimeout(timeFun, o.speed);
|
|
|
};
|
|
|
- lyric_listener=setTimeout(timeFun,o.speed);
|
|
|
+ lyric_listener = setTimeout(timeFun, o.speed);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- $.fn.jqlyric.defaults={
|
|
|
- lyric:'[00:00.00]未找到歌词', // 歌词字符串 (lrc格式)
|
|
|
- speed:500, // 歌词进度一首歌间隔(毫秒)
|
|
|
- getPosition:function(){ // 获取播放器当前播放位置
|
|
|
- gtime+=0.5;
|
|
|
+ $.fn.jqlyric.defaults = {
|
|
|
+ lyric: '[00:00.00]未找到歌词',
|
|
|
+ // 歌词字符串 (lrc格式)
|
|
|
+ speed: 500,
|
|
|
+ // 歌词进度一首歌间隔(毫秒)
|
|
|
+ getPosition: function() { // 获取播放器当前播放位置
|
|
|
+ gtime += 0.5;
|
|
|
return gtime;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- function toSeconds(t){ //把形如:01:25的时间转化成秒;
|
|
|
- var m=t.substring(0,t.indexOf(":"));
|
|
|
- var s=t.substring(t.indexOf(":")+1);
|
|
|
- s=parseInt(s.replace(/\b(0+)/gi,""));
|
|
|
- if(isNaN(s))
|
|
|
- s=0;
|
|
|
- var totalt=parseInt(m)*60+s;
|
|
|
+ function toSeconds(t) { //把形如:01:25的时间转化成秒;
|
|
|
+ var m = t.substring(0, t.indexOf(":"));
|
|
|
+ var s = t.substring(t.indexOf(":") + 1);
|
|
|
+ s = parseInt(s.replace(/\b(0+)/gi, ""));
|
|
|
+ if (isNaN(s)) s = 0;
|
|
|
+ var totalt = parseInt(m) * 60 + s;
|
|
|
//alert(parseInt(s.replace(/\b(0+)/gi,"")));
|
|
|
- if(isNaN(totalt))
|
|
|
- return 0;
|
|
|
+ if (isNaN(totalt)) return 0;
|
|
|
return totalt;
|
|
|
}
|
|
|
|
|
|
})(jQuery);
|
|
|
|
|
|
-$(function() {
|
|
|
- var audio=document.getElementById("audio");
|
|
|
- if(!audio){
|
|
|
- return;
|
|
|
- }
|
|
|
- var fun_getPosition=function(){
|
|
|
- return audio.currentTime;
|
|
|
- }
|
|
|
- var url=audio.currentSrc;
|
|
|
- var urlArr = url.split('?');
|
|
|
- var k = urlArr[0], appU = k.split('/');
|
|
|
- var srcFileExt = appU[appU.length - 1].split('.')[1];
|
|
|
- url=url.replace("."+srcFileExt,".lrc");
|
|
|
- var url = "http://122.114.50.251:8010/getJSON.php?callback=?&url="+(url);
|
|
|
- var $container=$('#lyriccontainer');
|
|
|
- $('#lyricFullscreen').click(function(event){
|
|
|
- var element=$container[0];
|
|
|
- $('#lyriccontainer li').attr("css","liveli");
|
|
|
- // 判断浏览器前缀
|
|
|
- if (document.fullscreenEnabled) {
|
|
|
- if(element.requestFullscreen){
|
|
|
- element.requestFullscreen();
|
|
|
- } else if(element.mozRequestFullScreen) {
|
|
|
- element.mozRequestFullScreen();
|
|
|
- } else if(element.webkitRequestFullscreen) {
|
|
|
- element.webkitRequestFullscreen();
|
|
|
- } else if(element.msRequestFullscreen) {
|
|
|
- element.msRequestFullscreen();
|
|
|
+$(function() {
|
|
|
+ var audio = document.getElementById("audio");
|
|
|
+ if (!audio) {
|
|
|
+ return;
|
|
|
}
|
|
|
- }
|
|
|
- });
|
|
|
- console.log(url);
|
|
|
- $.getJSON(url, function(data){
|
|
|
- var lrcContent=data.data;console.log(lrcContent);
|
|
|
- if(!lrcContent||lrcContent==""){
|
|
|
- return;
|
|
|
- }
|
|
|
- //用于显示歌词的容器对象,样式自己定义
|
|
|
- $container.jqlyric({
|
|
|
- lyric:lrcContent, // 歌词字符串,标准lrc文件格式
|
|
|
- getPosition:fun_getPosition
|
|
|
- });
|
|
|
- });
|
|
|
+ var fun_getPosition = function() {
|
|
|
+ return audio.currentTime;
|
|
|
+ }
|
|
|
+ var url = audio.currentSrc;
|
|
|
+ var urlArr = url.split('?');
|
|
|
+ var k = urlArr[0],
|
|
|
+ appU = k.split('/');
|
|
|
+ var srcFileExt = appU[appU.length - 1].split('.')[1];
|
|
|
+ url = url.replace("." + srcFileExt, ".lrc");
|
|
|
+ var url = "http://122.114.50.251:8010/getJSON.php?callback=?&url=" + (url);
|
|
|
+ var $container = $('#lyriccontainer');
|
|
|
+
|
|
|
+ $('#lyricFullscreen').click(function(event) {
|
|
|
+ var element = $container[0];
|
|
|
+ audio.play();
|
|
|
+ // 判断浏览器前缀
|
|
|
+ if (document.fullscreenEnabled) {
|
|
|
+ if (element.requestFullscreen) {
|
|
|
+ element.requestFullscreen();
|
|
|
+ } else if (element.mozRequestFullScreen) {
|
|
|
+ element.mozRequestFullScreen();
|
|
|
+ } else if (element.webkitRequestFullscreen) {
|
|
|
+ element.webkitRequestFullscreen();
|
|
|
+ } else if (element.msRequestFullscreen) {
|
|
|
+ element.msRequestFullscreen();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //console.log(url);
|
|
|
+ $.getJSON(url,
|
|
|
+ function(data) {
|
|
|
+ var lrcContent = data.data; //console.log(lrcContent);
|
|
|
+ if (!lrcContent || lrcContent == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //用于显示歌词的容器对象,样式自己定义
|
|
|
+ $container.jqlyric({
|
|
|
+ lyric: lrcContent,
|
|
|
+ // 歌词字符串,标准lrc文件格式
|
|
|
+ getPosition: fun_getPosition
|
|
|
+ });
|
|
|
+ });
|
|
|
});
|