|
|
@@ -35,256 +35,257 @@
|
|
|
* ========================================================== */
|
|
|
|
|
|
(function($) {
|
|
|
- var gtime = 0;
|
|
|
- var lyric_listener;
|
|
|
- $.fn.jqlyric = function(options) {
|
|
|
- var opts = $.extend({},
|
|
|
- $.fn.jqlyric.defaults, options);
|
|
|
+ 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);
|
|
|
+ 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("]"));
|
|
|
+ var arrLyric = new Array(); //放存汉字的歌词
|
|
|
+ var arrTime = new Array(); //存放时间
|
|
|
+ var currentLine = 0; //当前活动的歌词行号
|
|
|
+ // 开始解析歌词
|
|
|
+ //将歌词解析成数组
|
|
|
+ var arrly = o.lyric.split('\n');
|
|
|
+ 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)); //放时间
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ // 所有歌词按时间顺序排列
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ 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 lrc = {
|
|
|
+ timeStart: timeStart,
|
|
|
+ timeEnd: timeEnd,
|
|
|
+ lrcContent: lrcContent
|
|
|
+ };
|
|
|
+ arrLyricObj.push(lrc);
|
|
|
+ }
|
|
|
+ // 显示歌词
|
|
|
+ var displayLine = function(lineID,num){
|
|
|
+ var lc = arrLyricObj[num].lrcContent.split("<br/>");
|
|
|
+ $(lineID+" span:eq(0)").text(lc[0]);
|
|
|
+ if (lc.length > 1) {
|
|
|
+ $(lineID+" span:eq(1)").text(lc[1]);
|
|
|
+ }
|
|
|
+ if (lc.length > 2) {
|
|
|
+ $(lineID+" span:eq(2)").text(lc[2]);
|
|
|
+ }
|
|
|
+ $(lineID).attr("currentLine", num);
|
|
|
+ };
|
|
|
+
|
|
|
+ clearTimeout(lyric_listener);
|
|
|
+ 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) {
|
|
|
+ if (k > 0) {
|
|
|
+ displayLine("#line-last",k-1);
|
|
|
+ }
|
|
|
+ if (k < arrTime.length - 1) {
|
|
|
+ displayLine("#line-next",k+1);
|
|
|
+ }
|
|
|
|
|
|
- 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]);
|
|
|
- }
|
|
|
- if (lc.length > 2) {
|
|
|
- $("#line-last span:eq(2)").text(lc[2]);
|
|
|
- }
|
|
|
- $("#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]);
|
|
|
- }
|
|
|
- if (lc.length > 2) {
|
|
|
- $("#line-next span:eq(2)").text(lc[2]);
|
|
|
- }
|
|
|
- $("#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/>");//console.log(lc);
|
|
|
- $("#line-current span:eq(0)").text(lc[0]);
|
|
|
- if (lc.length > 1) {
|
|
|
- $("#line-current span:eq(1)").text(lc[1]);
|
|
|
- }
|
|
|
- if (lc.length > 2) {
|
|
|
- $("#line-current span:eq(2)").text(lc[2]);
|
|
|
- }
|
|
|
- $("#line-current").attr("currentLine", k);
|
|
|
- $("#line-current span").fadeIn(400,
|
|
|
- function() {
|
|
|
- fadeFinish = true;
|
|
|
- });
|
|
|
+ displayLine("#line-current",k);
|
|
|
|
|
|
- });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ lyric_listener = setTimeout(timeFun, o.speed);
|
|
|
+ };
|
|
|
+ lyric_listener = setTimeout(timeFun, o.speed);
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- 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;
|
|
|
- return gtime;
|
|
|
- }
|
|
|
- }
|
|
|
+ $.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;
|
|
|
- }
|
|
|
+ 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");
|
|
|
- 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];
|
|
|
- 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
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
+ 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');
|
|
|
var noSleep = new NoSleep();
|
|
|
-var btn_lyricNoslep=document.getElementById("lyricNoslep");
|
|
|
-if(btn_lyricNoslep){
|
|
|
- btn_lyricNoslep.addEventListener('click', function enableNoSleep() {
|
|
|
- if(btn_lyricNoslep.innerHTML=='禁止熄屏'){
|
|
|
- btn_lyricNoslep.innerHTML='允许熄屏';
|
|
|
- //btn_lyricNoslep.removeEventListener('click', enableNoSleep, false);
|
|
|
- noSleep.enable();
|
|
|
- }else{
|
|
|
- btn_lyricNoslep.innerHTML='禁止熄屏';
|
|
|
- noSleep.disable();
|
|
|
-
|
|
|
+ var enableNoSleep = false;
|
|
|
+ var btn_lyricFullscreen = document.getElementById("lyricFullscreen");
|
|
|
+ if (btn_lyricFullscreen) {
|
|
|
+ btn_lyricFullscreen.addEventListener('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();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 监听全屏事件触发
|
|
|
+ var fullscreenchange = function() {
|
|
|
+ let isFullScreen = !!(
|
|
|
+ document.fullscreen ||
|
|
|
+ document.mozFullScreen ||
|
|
|
+ document.webkitIsFullScreen ||
|
|
|
+ document.webkitFullScreen ||
|
|
|
+ document.msFullScreen
|
|
|
+ );
|
|
|
+ if (isFullScreen) {
|
|
|
+ if(!enableNoSleep){noSleep.enable();}
|
|
|
+ enableNoSleep = true;
|
|
|
+ } else {
|
|
|
+ if(enableNoSleep){noSleep.disable();}
|
|
|
+ enableNoSleep = false;
|
|
|
+ }
|
|
|
+ if(enableNoSleep){
|
|
|
+ $("#lyricSleep").prop("checked",true);
|
|
|
}
|
|
|
- }, false);
|
|
|
-}
|
|
|
-var btn_lyricBigger=document.getElementById("lyricBigger");
|
|
|
-if(btn_lyricBigger){
|
|
|
- btn_lyricBigger.addEventListener('click', function () {
|
|
|
- var size=getComputedStyle($('#lyriccontainer')[0],false)['font-size'];
|
|
|
- var num=parseInt(size.substring(0,size.indexOf("px")));console.log(size);
|
|
|
- num+=2;
|
|
|
- var unit="px";
|
|
|
- size=num+unit;
|
|
|
- $('#lyriccontainer')[0].style.fontSize=size;
|
|
|
- }, false);
|
|
|
-}
|
|
|
-var btn_lyricSmaller=document.getElementById("lyricSmaller");
|
|
|
-if(btn_lyricSmaller){
|
|
|
- btn_lyricSmaller.addEventListener('click', function () {
|
|
|
- var size=getComputedStyle($('#lyriccontainer')[0],false)['font-size'];
|
|
|
- var num=parseInt(size.substring(0,size.indexOf("px")));console.log(size);
|
|
|
- num-=2;
|
|
|
- var unit="px";
|
|
|
- size=num+unit;
|
|
|
- $('#lyriccontainer')[0].style.fontSize=size;
|
|
|
- }, false);
|
|
|
-}
|
|
|
+ else{
|
|
|
+ $("#lyricSleep").prop("checked",false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ ['fullscreenchange','webkitfullscreenchange','mozfullscreenchange'].forEach((item,index) => {
|
|
|
+ $container[0].addEventListener(item, () => fullscreenchange());
|
|
|
+ });
|
|
|
+
|
|
|
+ $.getJSON(url,
|
|
|
+ function(data) {
|
|
|
+ var lrcContent = data.data;
|
|
|
+ if (!lrcContent || lrcContent == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //用于显示歌词的容器对象，样式自己定义
|
|
|
+ $container.jqlyric({
|
|
|
+ lyric: lrcContent,
|
|
|
+ // 歌词字符串，标准lrc文件格式
|
|
|
+ getPosition: fun_getPosition
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ var btn_lyricBigger = document.getElementById("lyricBigger");
|
|
|
+ //调节字体大小
|
|
|
+ var adjustFontSize = function (sizeOffset){
|
|
|
+ var size = getComputedStyle($('#lyriccontainer')[0], false)['font-size'];
|
|
|
+ var num = parseInt(size.substring(0, size.indexOf("px")));
|
|
|
+ num += sizeOffset;
|
|
|
+ var unit = "px";
|
|
|
+ size = num + unit;
|
|
|
+ $('#lyriccontainer')[0].style.fontSize = size;
|
|
|
+ };
|
|
|
+
|
|
|
+ if (btn_lyricBigger) {
|
|
|
+ btn_lyricBigger.addEventListener('click',
|
|
|
+ function() {
|
|
|
+ adjustFontSize(2);
|
|
|
+ },
|
|
|
+ false);
|
|
|
+ }
|
|
|
+
|
|
|
+ var btn_lyricSmaller = document.getElementById("lyricSmaller");
|
|
|
+ if (btn_lyricSmaller) {
|
|
|
+ btn_lyricSmaller.addEventListener('click',
|
|
|
+ function() {
|
|
|
+ adjustFontSize(-2);
|
|
|
+ },
|
|
|
+ false);
|
|
|
+ }
|
|
|
+ var chk_lyricSleep = document.getElementById("lyricSleep");
|
|
|
+ if (chk_lyricSleep) {
|
|
|
+ chk_lyricSleep.addEventListener('change',
|
|
|
+ function(event) {
|
|
|
+ let isCheck = event.srcElement.checked;
|
|
|
+ if (isCheck) {
|
|
|
+ if(!enableNoSleep){noSleep.enable();}
|
|
|
+ enableNoSleep = true;
|
|
|
+ } else {
|
|
|
+ if(enableNoSleep){noSleep.disable();}
|
|
|
+ enableNoSleep = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
ecd\tbw_1357250783514014