JS学习笔记（6）--音乐播放器

说明（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 ];