说明（2017.3.15）：
1. lrc.js里面存储LRC歌词的格式的数组，获取里面的时间轴，转为秒数。
2. 通过audio.currentTime属性，setinterval每秒获取歌曲播放的秒数。
3. 将两个时间比大小，如果“歌曲播放时间”>“歌词时间”，就输出这句歌词。
4. 补充需求：
（1）需要把歌词补充完整
（2）不是在控制台输出，直接在页面输出
（3）增加播放列表
music.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <audio src="Taylor Swift - Love Story.mp3" id="audio" autoplay="autoplay" controls="controls" preload="auto"> 9 您的浏览器不支持audio属性，请更换浏览器再进行浏览。 10 </audio> 11 <button id="btnTime">time</button> 12 </body> 13 <script src="lrc.js"></script> 14 <script type="text/javascript"> 15 var text = "[00:15.80]We were both young when I first saw you 16 [00:19.74]I closed my eyes and the flashback starts 17 [00:23.26]I'm standing there"; 18 var audio = document.getElementById("audio"); 19 btnTime.onclick = function(){ 20 var timeLrc = getTime(); 21 console.log(timeLrc); 22 }; 23 24 var getTime = function(){ 25 // 不需要这个函数了，直接输出audio.currentTime这个时间进行比大小就可以 26 // 获取03:14:33这种格式的当前播放时间 27 var timeNow = audio.currentTime 28 // console.log(timeNow); 29 // 获取分钟数 30 var timeMin = String(Math.floor(timeNow/60)); 31 // 如果分钟数是1位，前面加个0 32 timeMin = timeMin.length<2 ? "0"+timeMin : timeMin; 33 // console.log(timeMin); 34 var timeSec = String(Math.floor(timeNow%60)); 35 timeSec = timeSec.length<2 ? "0"+timeSec : timeSec; 36 // console.log(timeSec); 37 var timeMil = String(timeNow); 38 timeMil = timeMil.substr(timeMil.indexOf('.')+1,2) 39 // console.log(timeMil); 40 var timeLrc = timeMin + ":" + timeSec + "." + timeMil; 41 42 return timeLrc; 43 }; 44 var getLrcTime = function(i){ 45 // 获取歌词里的每句的时间 46 var lrcTime = loveStory[i].substr(1,8); 47 // 分钟转数字可以去掉前面的0 48 lrcTimeMin = parseInt(lrcTime.split(":")[0]); 49 // 虽然末尾有0，不过要转成数字比大小 50 lrcTimeSec = parseFloat(lrcTime.split(":")[1]); 51 lrcTime = lrcTimeMin*60+lrcTimeSec; 52 // console.log(lrcTimeMin); 53 // console.log(lrcTimeSec); 54 // console.log(lrcTime); 55 return lrcTime; 56 }; 57 // getLrcTime(); 58 59 setInterval(function(){ 60 // 获取lrc.js文件中的歌词，每秒刷新一下，获取播放时间，然后跟歌词里的时间比对，如果播放时间大于歌词时间，就显示歌词。 61 62 63 var timeNow = audio.currentTime 64 65 for(var i = 0; i < loveStory.length; i++){ 66 var lrcTime = getLrcTime(i); 67 // console.log(lrcTime); 68 var lrcWord = loveStory[i].substr(10,loveStory[i].length); 69 if(timeNow > lrcTime){ 70 console.log(lrcTime); 71 console.log(lrcWord); 72 loveStory.splice(i,1); 73 }else{ 74 75 } 76 } 77 // if (!audio.paused) { 78 // console.log(playTime.substr(0,5)); 79 // // console.log(playTime); 80 // } 81 },1000); 82 </script> 83 </html>
lrc.js
1 var loveStory = [ 2 "[00:15.80]We were both young when I first saw you", 3 4 "[00:19.74]I closed my eyes and the flashback starts", 5 6 "[00:23.26]I'm standing there", 7 8 "[00:26.95]On a balcony in summer air", 9 10 "[00:32.14]See the lights see the party the ball gowns", 11 12 "[00:35.87]I see you make your way through the crowd", 13 14 "[00:39.29]And say hello", 15 16 "[00:43.38]Little did I know", 17 18 "[00:48.07]That you were Romeo you were throwing pebbles", 19 20 "[00:51.72]And my daddy said stay away from Juliet", 21 22 "[00:55.38]And I was crying on the staircase", 23 24 "[00:58.28]Begging you please don't go", 25 26 "[01:02.74]And I said", 27 28 "[01:04.25]Romeo take me somewhere we can be alone", 29 30 "[01:08.38]I'll be waiting all there's left to do is run" 31 ];