lrc.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. /* ===================================================
  2. * jqlyric.js v0.1
  3. * shawnk@qq.com
  4. * 使用方法
  5. * var $container=$('#lyriccontainer'); //用于显示歌词的容器对象,样式自己定义
  6. * $container.jqlyric({
  7. * lyric:'\
  8. [ti:存在] \
  9. [ar:汪峰] \
  10. [al:存在] \
  11. [by:Love] \
  12. [00:00.00]汪峰 - 存在 \
  13. [00:00.68]多少人走着却困在原地 \
  14. [00:07.93]多少人活着却如同死去', // 歌词字符串,标准lrc文件格式
  15. * speed:1000, // 歌词滚动间隔 (毫秒)
  16. * getPosition:function(){ // 获取当前播放位置的函数(返回秒数), 请定义外部函数,不指定本参数则默认从调用插件开始自动播放
  17. * return position;
  18. * }
  19. * });
  20. * ===================================================
  21. *
  22. * Licensed under the Apache License, Version 2.0 (the "License");
  23. * you may not use this file except in compliance with the License.
  24. * You may obtain a copy of the License at
  25. *
  26. * http://www.apache.org/licenses/LICENSE-2.0
  27. *
  28. * Unless required by applicable law or agreed to in writing, software
  29. * distributed under the License is distributed on an "AS IS" BASIS,
  30. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31. * See the License for the specific language governing permissions and
  32. * limitations under the License.
  33. * ========================================================== */
  34. (function($) {
  35. var gtime = 0;
  36. var lyric_listener;
  37. $.fn.jqlyric = function(options) {
  38. var opts = $.extend({},
  39. $.fn.jqlyric.defaults, options);
  40. return this.each(function() {
  41. var o = $.meta ? $.extend({},
  42. opts, $this.data()) : opts;
  43. var $this = $(this);
  44. var arrLyric = new Array(); //放存汉字的歌词
  45. var arrTime = new Array(); //存放时间
  46. var currentLine = 0; //当前活动的歌词行号
  47. // 开始解析歌词
  48. //将歌词解析成数组
  49. var arrly = o.lyric.split('\n'); //console.log(arrly);
  50. for (var i = 0; i < arrly.length; i++) {
  51. var str = arrly[i];
  52. str = str.substring(str.indexOf("[") + 1, str.indexOf("]"));
  53. if (str.indexOf('ti:') > -1 || str.indexOf('ar:') > -1 || str.indexOf('al:') > -1 || str.indexOf('by:') > -1) {
  54. // 歌曲特征字段
  55. var tmp = str.substring(str.indexOf(':') + 1);
  56. var text = tmp;
  57. //tag=tag.replace(/([ti|ar|al|by])/g,'');
  58. //arrLyric.push(tag+text);
  59. //arrTime.push(toSeconds('00:00:00')); //
  60. } else {
  61. var text = arrly[i].substring(arrly[i].indexOf("]") + 1);
  62. //if(text==''){text='&nbsp;';}
  63. arrLyric.push(text); //放歌词
  64. arrTime.push(toSeconds(str)); //放时间
  65. }
  66. }
  67. // 所有歌词按时间顺序排列
  68. for (var k = 0; k < arrTime.length; k++) {
  69. for (var j = 0; j < arrTime.length - k; j++) {
  70. if (arrTime[j] > arrTime[j + 1]) {
  71. temp = arrTime[j];
  72. arrTime[j] = arrTime[j + 1];
  73. arrTime[j + 1] = temp;
  74. temp = arrLyric[j];
  75. arrLyric[j] = arrLyric[j + 1];
  76. arrLyric[j + 1] = temp;
  77. }
  78. }
  79. }
  80. var arrLyricObj = new Array();
  81. for (var k = 0; k < arrTime.length; k++) {
  82. var lrcContent = arrLyric[k];
  83. var len = lrcContent.replace(/(^s*)|(s*$)/g, "").length; //console.log(lrcContent.charCodeAt(0).toString(16));
  84. if (!lrcContent || len == 0) {
  85. continue;
  86. }
  87. var timeStart = arrTime[k];
  88. var timeEnd = k < arrTime.length - 1 ? arrTime[k + 1] - 0.01 : 99999999999999;
  89. if (timeEnd < 0) {
  90. continue;
  91. }
  92. var lrc = {
  93. timeStart: timeStart,
  94. timeEnd: timeEnd,
  95. lrcContent: lrcContent
  96. };
  97. arrLyricObj.push(lrc);
  98. }
  99. clearTimeout(lyric_listener);
  100. var fadeFinish = true;
  101. var timeFun = function() { // 定时检查当前播放进度,作出滚动动作
  102. var pos = o.getPosition();
  103. for (var k = 0; k < arrLyricObj.length; k++) {
  104. if (pos >= arrLyricObj[k].timeStart && pos <= arrLyricObj[k].timeEnd) {
  105. if ($("#line-current").attr("currentLine") != k && fadeFinish) {
  106. if (k > 0) {
  107. $("#line-last span").fadeOut(400,
  108. function() {
  109. var lc = arrLyricObj[k - 1].lrcContent.split("<br/>");
  110. $("#line-last span:eq(0)").text(lc[0]);
  111. if (lc.length > 1) {
  112. $("#line-last span:eq(1)").text(lc[1]);
  113. }
  114. if (lc.length > 2) {
  115. $("#line-last span:eq(2)").text(lc[2]);
  116. }
  117. $("#line-last").attr("currentLine", k);
  118. $("#line-last span").fadeIn(400,
  119. function() {
  120. fadeFinish = true;
  121. });
  122. });
  123. }
  124. if (k < arrTime.length - 1) {
  125. $("#line-next span").fadeOut(400,
  126. function() {
  127. var lc = arrLyricObj[k + 1].lrcContent.split("<br/>");
  128. $("#line-next span:eq(0)").text(lc[0]);
  129. if (lc.length > 1) {
  130. $("#line-next span:eq(1)").text(lc[1]);
  131. }
  132. if (lc.length > 2) {
  133. $("#line-next span:eq(2)").text(lc[2]);
  134. }
  135. $("#line-next").attr("currentLine", k);
  136. $("#line-next span").fadeIn(400,
  137. function() {
  138. fadeFinish = true;
  139. });
  140. });
  141. }
  142. fadeFinish = false;
  143. $("#line-current span").fadeOut(400,
  144. function() {
  145. var lc = arrLyricObj[k].lrcContent.split("<br/>");//console.log(lc);
  146. $("#line-current span:eq(0)").text(lc[0]);
  147. if (lc.length > 1) {
  148. $("#line-current span:eq(1)").text(lc[1]);
  149. }
  150. if (lc.length > 2) {
  151. $("#line-current span:eq(2)").text(lc[2]);
  152. }
  153. $("#line-current").attr("currentLine", k);
  154. $("#line-current span").fadeIn(400,
  155. function() {
  156. fadeFinish = true;
  157. });
  158. });
  159. break;
  160. }
  161. }
  162. }
  163. lyric_listener = setTimeout(timeFun, o.speed);
  164. };
  165. lyric_listener = setTimeout(timeFun, o.speed);
  166. });
  167. };
  168. $.fn.jqlyric.defaults = {
  169. lyric: '[00:00.00]未找到歌词',
  170. // 歌词字符串 (lrc格式)
  171. speed: 500,
  172. // 歌词进度一首歌间隔(毫秒)
  173. getPosition: function() { // 获取播放器当前播放位置
  174. gtime += 0.5;
  175. return gtime;
  176. }
  177. }
  178. function toSeconds(t) { //把形如:01:25的时间转化成秒;
  179. var m = t.substring(0, t.indexOf(":"));
  180. var s = t.substring(t.indexOf(":") + 1);
  181. s = parseInt(s.replace(/\b(0+)/gi, ""));
  182. if (isNaN(s)) s = 0;
  183. var totalt = parseInt(m) * 60 + s;
  184. //alert(parseInt(s.replace(/\b(0+)/gi,"")));
  185. if (isNaN(totalt)) return 0;
  186. return totalt;
  187. }
  188. })(jQuery);
  189. $(function() {
  190. var audio = document.getElementById("audio");
  191. if (!audio) {
  192. return;
  193. }
  194. var fun_getPosition = function() {
  195. return audio.currentTime;
  196. }
  197. var url = audio.currentSrc;
  198. var urlArr = url.split('?');
  199. var k = urlArr[0],
  200. appU = k.split('/');
  201. var srcFileExt = appU[appU.length - 1].split('.')[1];
  202. url = url.replace("." + srcFileExt, ".lrc");
  203. var url = "http://122.114.50.251:8010/getJSON.php?callback=?&url=" + (url);
  204. var $container = $('#lyriccontainer');
  205. $('#lyricFullscreen').click(function(event) {
  206. var element = $container[0];
  207. audio.play();
  208. // 判断浏览器前缀
  209. if (document.fullscreenEnabled) {
  210. if (element.requestFullscreen) {
  211. element.requestFullscreen();
  212. } else if (element.mozRequestFullScreen) {
  213. element.mozRequestFullScreen();
  214. } else if (element.webkitRequestFullscreen) {
  215. element.webkitRequestFullscreen();
  216. } else if (element.msRequestFullscreen) {
  217. element.msRequestFullscreen();
  218. }
  219. }
  220. });
  221. //console.log(url);
  222. $.getJSON(url,
  223. function(data) {
  224. var lrcContent = data.data; //console.log(lrcContent);
  225. if (!lrcContent || lrcContent == "") {
  226. return;
  227. }
  228. //用于显示歌词的容器对象,样式自己定义
  229. $container.jqlyric({
  230. lyric: lrcContent,
  231. // 歌词字符串,标准lrc文件格式
  232. getPosition: fun_getPosition
  233. });
  234. });
  235. var noSleep = new NoSleep();
  236. var btn_lyricNoslep=document.getElementById("lyricNoslep");
  237. if(btn_lyricNoslep){
  238. btn_lyricNoslep.addEventListener('click', function enableNoSleep() {
  239. if(btn_lyricNoslep.innerHTML=='禁止熄屏'){
  240. btn_lyricNoslep.innerHTML='允许熄屏';
  241. //btn_lyricNoslep.removeEventListener('click', enableNoSleep, false);
  242. noSleep.enable();
  243. }else{
  244. btn_lyricNoslep.innerHTML='禁止熄屏';
  245. noSleep.disable();
  246. }
  247. }, false);
  248. }
  249. var btn_lyricBigger=document.getElementById("lyricBigger");
  250. if(btn_lyricBigger){
  251. btn_lyricBigger.addEventListener('click', function () {
  252. var size=getComputedStyle($('#lyriccontainer')[0],false)['font-size'];
  253. var num=parseInt(size.substring(0,size.indexOf("px")));console.log(size);
  254. num+=2;
  255. var unit="px";
  256. size=num+unit;
  257. $('#lyriccontainer')[0].style.fontSize=size;
  258. }, false);
  259. }
  260. var btn_lyricSmaller=document.getElementById("lyricSmaller");
  261. if(btn_lyricSmaller){
  262. btn_lyricSmaller.addEventListener('click', function () {
  263. var size=getComputedStyle($('#lyriccontainer')[0],false)['font-size'];
  264. var num=parseInt(size.substring(0,size.indexOf("px")));console.log(size);
  265. num-=2;
  266. var unit="px";
  267. size=num+unit;
  268. $('#lyriccontainer')[0].style.fontSize=size;
  269. }, false);
  270. }
  271. });