|
|
@@ -0,0 +1,224 @@
|
|
|
+/* ===================================================
|
|
|
+ * jqlyric.js v0.1
|
|
|
+ * shawnk@qq.com
|
|
|
+
|
|
|
+ * 使用方法
|
|
|
+ * var $container=$('#lyriccontainer'); //用于显示歌词的容器对象，样式自己定义
|
|
|
+ * $container.jqlyric({
|
|
|
+ * lyric:'\
|
|
|
+ [ti:存在] \
|
|
|
+ [ar:汪峰] \
|
|
|
+ [al:存在] \
|
|
|
+ [by:Love] \
|
|
|
+ [00:00.00]汪峰 - 存在 \
|
|
|
+ [00:00.68]多少人走着却困在原地 \
|
|
|
+ [00:07.93]多少人活着却如同死去', // 歌词字符串，标准lrc文件格式
|
|
|
+ * speed:1000, // 歌词滚动间隔 (毫秒)
|
|
|
+ * getPosition:function(){ // 获取当前播放位置的函数(返回秒数), 请定义外部函数，不指定本参数则默认从调用插件开始自动播放
|
|
|
+ * return position;
|
|
|
+ * }
|
|
|
+ * });
|
|
|
+
|
|
|
+ * ===================================================
|
|
|
+ *
|
|
|
+ * Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
+ * you may not use this file except in compliance with the License.
|
|
|
+ * You may obtain a copy of the License at
|
|
|
+ *
|
|
|
+ * http://www.apache.org/licenses/LICENSE-2.0
|
|
|
+ *
|
|
|
+ * Unless required by applicable law or agreed to in writing, software
|
|
|
+ * distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
+ * See the License for the specific language governing permissions and
|
|
|
+ * limitations under the License.
|
|
|
+ * ========================================================== */
|
|
|
+
|
|
|
+(function($) {
|
|
|
+ var gtime=0;
|
|
|
+ var lyric_listener;
|
|
|
+ $.fn.jqlyric = function(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; //当前活动的歌词行号
|
|
|
+
|
|
|
+ // 开始解析歌词
|
|
|
+ var lyric=o.lyric;
|
|
|
+ lyric=lyric.replace(/\]\n/g,'\]\n\|\|');
|
|
|
+ lyric=lyric.replace(/\]\s\[/g,'\]\[');
|
|
|
+ lyric=lyric.replace(/\]\[/g,'====');
|
|
|
+ lyric=lyric.replace(/\[/g,'\|\|\[');
|
|
|
+ lyric=lyric.replace(/====/g,'\]\[');
|
|
|
+
|
|
|
+ lyric=lyric.replace(/\|\|\|\|\|\|\|\|/g,'\|\|');
|
|
|
+ lyric=lyric.replace(/\|\|\|\|\|\|/g,'\|\|');
|
|
|
+ lyric=lyric.replace(/\|\|\|\|/g,'\|\|');
|
|
|
+
|
|
|
+
|
|
|
+ //将歌词解析成数组
|
|
|
+ var arrly=lyric.split('||');
|
|
|
+
|
|
|
+ for(var i=0;i<arrly.length;i++){
|
|
|
+ var str=arrly[i];
|
|
|
+
|
|
|
+ var left=0; //"["的个数
|
|
|
+ var leftAr=new Array();
|
|
|
+ for(var k=0;k<str.length;k++){
|
|
|
+ if(str.charAt(k)=="["){
|
|
|
+ leftAr[left]=k;
|
|
|
+ left++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(left!=0){
|
|
|
+ for(var j=0;j<leftAr.length;j++){
|
|
|
+ var tag=str.charAt(leftAr[j]+1)+str.charAt(leftAr[j]+2);
|
|
|
+
|
|
|
+ if(tag=='ti'||tag=='ar'||tag=='by'||tag=='al'){
|
|
|
+ // 歌曲特征字段
|
|
|
+ var tmp=str.split(tag+':');
|
|
|
+ tmp=tmp[1].split(']');
|
|
|
+ var text=tmp[0];
|
|
|
+ tag=tag.replace(/([ti|ar|al|by])/g,'');
|
|
|
+ arrLyric.push(tag+text);
|
|
|
+ arrTime.push(toSeconds('00:00:00')); //
|
|
|
+ }else{
|
|
|
+ var text=str.substring(str.lastIndexOf("]")+1);
|
|
|
+ if(text==''){text=' ';}
|
|
|
+ arrLyric.push(text); //放歌词
|
|
|
+ arrTime.push(toSeconds(str.substring(leftAr[j]+1,leftAr[j]+6))); //放时间
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 所有歌词按时间顺序排列
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ lyric='';
|
|
|
+ for(var i=0;i<arrLyric.length;i++){
|
|
|
+ lyric+='<li id="line-'+i+'" >'+arrLyric[i]+'</li>';
|
|
|
+ }
|
|
|
+
|
|
|
+ $this.html('<div class="fixed-lyric-box" style="position:relative;height:100%;overflow:hidden"><ul class="lyric-list" style="position:absolute;clear:both;display:block">'+lyric+'</ul></div>');
|
|
|
+
|
|
|
+ var $box=$this.find('.fixed-lyric-box');
|
|
|
+ var $list=$this.find('ul.lyric-list');
|
|
|
+
|
|
|
+ var height=$box.height();
|
|
|
+ var lineHeight=$list.height()/arrLyric.length;
|
|
|
+
|
|
|
+ $list.css({'left':'0px','top':(height-lineHeight)/2+'px'});
|
|
|
+
|
|
|
+ clearInterval(lyric_listener);
|
|
|
+ lyric_listener=setInterval(function(){ // 定时检查当前播放进度，作出滚动动作
|
|
|
+ var pos=o.getPosition();
|
|
|
+ if(arrTime[currentLine]<=pos){ // 当前显示行号时间小于歌曲进度，需要正常向前移动
|
|
|
+ for(var i=currentLine;i<arrLyric.length;i++){
|
|
|
+ if(arrTime[i+1]>pos||i+1==arrLyric.length){
|
|
|
+ var height=$box.height();
|
|
|
+ currentLine=i;
|
|
|
+
|
|
|
+ $list.find('li.active').removeClass('active');
|
|
|
+ $list.find('li#line-'+currentLine).addClass('active');
|
|
|
+
|
|
|
+ var topPos=(height-lineHeight)/2-(currentLine)*lineHeight;
|
|
|
+
|
|
|
+ $list.animate({
|
|
|
+ 'top':topPos+'px'
|
|
|
+ },400,function(){
|
|
|
+
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ for(var i=currentLine;i>0;i--){
|
|
|
+ if(arrTime[i-1]<pos||i==0){
|
|
|
+ var height=$box.height();
|
|
|
+ currentLine=i;
|
|
|
+
|
|
|
+ $list.find('li.active').removeClass('active');
|
|
|
+ $list.find('li#line-'+currentLine).addClass('active');
|
|
|
+
|
|
|
+ var topPos=(height-lineHeight)/2-(currentLine)*lineHeight;
|
|
|
+
|
|
|
+ $list.animate({
|
|
|
+ 'top':topPos+'px'
|
|
|
+ },400,function(){
|
|
|
+
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },o.speed);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ $.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;
|
|
|
+ //alert(parseInt(s.replace(/\b(0+)/gi,"")));
|
|
|
+ if(isNaN(totalt))
|
|
|
+ return 0;
|
|
|
+ return totalt;
|
|
|
+ }
|
|
|
+
|
|
|
+})(jQuery);
|
|
|
+
|
|
|
+$(function() {
|
|
|
+ var audio=document.getElementById("audio");
|
|
|
+ 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);
|
|
|
+
|
|
|
+ $.getJSON(url, function(data){
|
|
|
+ var lrcContent=data.data;
|
|
|
+ if(!lrcContent||lrcContent==""){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var $container=$('#lyriccontainer'); //用于显示歌词的容器对象，样式自己定义
|
|
|
+ $container.jqlyric({
|
|
|
+ lyric:lrcContent, // 歌词字符串，标准lrc文件格式
|
|
|
+ getPosition:fun_getPosition
|
|
|
+ });
|
|
|
+ });
|
|
|
+});
|
ecd\tbw_1357250783514014