https://siquan001.github.io/WebMusicPlayer/index.js

1var folderupload_input = document.getElementById('folderupload_input');
2var musictable = document.querySelector("#musiclist tbody");
3folderupload_input.onchange = function () {
4  if (this.files) {
5    document.getElementById('folderuploader').style.display = 'none';
6    document.querySelector("#musiclist").style.display = 'block';
7    document.querySelector("#lrc_frame").style.display = 'block';
8    for (var i = 0; i < this.files.length; i++) {
9      if (this.files[i].type.indexOf('audio/') != -1) {
10        function a(i) {
11          var url = URL.createObjectURL(this.files[i]);
12          var filename = this.files[i].name;
13          var tr = document.createElement('tr');
14          tr.innerHTML = '<td>' + filename + '</td><td></td><td></td><td></td><td></td><td></td>';
15          musictable.append(tr);
16          tr.onclick = function () {
17            alert('正在识别...');
18          }
19          ID3.loadTags(filename, function () {
20            var tags = ID3.getAllTags(filename);
21            tr.innerHTML = '<td>' + filename + '</td><td>' + (tags.track || '') + '</td><td>' + (tags.album || '') + '</td><td>' + (tags.artist || '') + '</td><td>' + (tags.title || '') + '</td><td>' + (tags.year || '') + '</td>';
22            tr.querySelectorAll('td').forEach(function(td){
23              td.title=td.innerText;
24            })
25            tr.onclick = function () {
26              var src='';
27              if(tags.picture){
28                var image = tags.picture;
29                var base64String = "";
30                for (var i = 0; i < image.data.length; i++) {
31                  base64String += String.fromCharCode(image.data[i]);
32                }
33                src = "data:" + image.format + ";base64," + window.btoa(base64String);
34              }
35              if (document.querySelector("tr.act")) { document.querySelector("tr.act").classList.remove('act') };
36              play(url, src, tags.artist, tags.title, tags.album, filename, tags.lyrics?tags.lyrics.U:'', tr);
37            }
38          }, {
39            tags: ['picture', 'title', 'artist', 'album', 'lyrics', 'comment', 'track', 'year', 'school'],
40            dataReader: ID3.FileAPIReader(this.files[i])
41          })
42        }
43        a.call(this, i);
44      }
45    }
46  }
47}
48
49
50var mimg = document.getElementById("music_img");
51var mp = document.getElementById("music_play");
52var mtitle = document.getElementById("music_title");
53var malbum = document.getElementById("music_album");
54var mname = document.getElementById("music_name");
55var mrange = document.getElementById("music_range");
56
57var lastbtn = document.getElementById("lastbtn");
58var playbtn = document.getElementById("playbtn");
59var nextbtn = document.getElementById("nextbtn");
60var nowplaytr = null;
61function play(musicurl, imgurl, artist, title, album, filename, lrc, tr) {
62  mimg.src = imgurl;
63  mp.src = musicurl;
64  mtitle.innerHTML = artist + ' - ' + title;
65  malbum.innerHTML = album;
66  mname.innerHTML = filename;
67  nowplaytr = tr;
68  tr.classList.add('act');
69  xrlrc(lrc);
70}
71
72mp.oncanplay = function () {
73  mrange.max = mp.duration;
74  try { mp.play() } catch (e) { };
75}
76mp.onended = function () {
77  if (nextrule == 'repeat-1') {
78    mp.play();
79  } else {
80    nextbtn.click();
81  }
82}
83var _up = true;
84mp.ontimeupdate = function () {
85  if (_up) {
86    mrange.value = mp.currentTime;
87  }
88  if(oLRC.ms.length>0){
89    var q = 0;
90    for (var i = 0; i < oLRC.ms.length; i++) {
91      if ((oLRC.ms[i].t - 0) > mp.currentTime) {
92        lrcf.style.marginTop = (window.innerHeight - 70) / 2 - getLiH(i) + 'px';
93        if (lrcf.querySelector('li.act')) {
94          lrcf.querySelector('li.act').classList.remove('act');
95        }
96        lrcf.querySelectorAll('li')[i - 1].classList.add('act');
97        q = 1;
98        break;
99      }
100    }
101    if (!q) {
102      lrcf.style.marginTop = (window.innerHeight - 70) / 2 - getLiH(oLRC.ms.length - 1) + 'px';
103      if (lrcf.querySelector('li.act')) {
104        lrcf.querySelector('li.act').classList.remove('act');
105      }
106      lrcf.querySelectorAll('li')[oLRC.ms.length - 1].classList.add('act');
107    }
108  }
109  
110  function getLiH(i) {
111    var h = 0;
112    for (var i2 = 0; i2 < i; i2++) {
113      var element = lrcf.querySelectorAll('li')[i2];
114      h += element.offsetHeight;
115    }
116    return h;
117  }
118}
119
120mrange.onmousedown = function () {

121  _up = false;
122  document.onmouseup = function () {
123    document.onmouseup = null;
124    _up = true;
125    mp.currentTime = mrange.value - 0;
126  }
127}
128
129mp.onplay = function () {
130  playbtn.className = 'bi bi-pause';
131}
132
133mp.onpause = function () {
134  playbtn.className = 'bi bi-play-fill';
135}
136
137document.getElementById("webqd").onclick=function(){
138  searchTags(mname.innerText.substring(0,mname.innerText.lastIndexOf('.')),function(a){
139    mimg.src = a.img;
140    mtitle.innerHTML = a.audio_name;
141    malbum.innerHTML = a.album_name;
142    xrlrc(a.lyrics);
143  });
144}
145
146playbtn.onclick = function () {
147  if (mp.paused) {
148    mp.play();
149  } else {
150    mp.pause();
151  }
152}
153
154lastbtn.onclick = function () {
155  if (nextrule != 'shuffle') {
156
157    if (nowplaytr) {
158      if (nowplaytr.previousSibling) {
159        nowplaytr.previousSibling.click();
160      } else {
161        var a = document.querySelectorAll("#musiclist tr");
162        a[a.length - 1].click();
163      }
164    } else {
165      var a = document.querySelectorAll("#musiclist tr");
166      if (a.length <= 1) return;
167      a[a.length - 1].click();
168    }
169  } else {
170    var a = document.querySelectorAll("#musiclist tr");
171    a[parseInt(Math.random() * a.length)].click();
172  }
173}
174
175nextbtn.onclick = function () {
176  if (nextrule != 'shuffle') {
177    if (nowplaytr) {
178      if (nowplaytr.nextSibling) {
179        nowplaytr.nextSibling.click();
180      } else {
181        var a = document.querySelectorAll("#musiclist tr");
182        a[1].click();
183      }
184    } else {
185      var a = document.querySelectorAll("#musiclist tr");
186      if (a.length <= 1) return;
187      a[1].click();
188    }
189  } else {
190    var a = document.querySelectorAll("#musiclist tr");
191    a[parseInt(Math.random() * a.length)].click();
192  }
193
194}
195var oLRC = {};
196
197function createLrcObj(lrc) {
198  if (lrc.length == 0) return;
199  var lrcs = lrc.split('\n');//用回车拆分成数组
200  for (var i in lrcs) {//遍历歌词数组
201    lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
202    var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
203    var s = t.split(":");//分离:前后文字
204    if (isNaN(parseInt(s[0]))) { //不是数值
205      for (var i in oLRC) {
206        if (i != "ms" && i == s[0].toLowerCase()) {
207          oLRC[i] = s[1];
208        }
209      }
210    } else { //是数值
211      var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
212      var start = 0;
213      for (var k in arr) {
214        start += arr[k].length; //计算歌词位置
215      }
216      var content = lrcs[i].substring(start);//获取歌词内容
217      for (var k in arr) {
218        var t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容
219        var s = t.split(":");//分离:前后文字
220        oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组
221          t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
222          c: content
223        });
224      }
225    }
226  }
227  oLRC.ms.sort(function (a, b) {//按时间顺序排序
228    return a.t - b.t;
229  });
230  /*
231  for(var i in oLRC){ //查看解析结果
232      console.log(i,":",oLRC[i]);
233  }*/
234}
235var lrcf = document.querySelector("#lrc_frame ul");
236function xrlrc(lrc) {
237  oLRC = {
238    ti: "", //歌曲名
239    ar: "", //演唱者
240    al: "", //专辑名
241    by: "", //歌词制作人
242    offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
243    ms: [] //歌词数组{t:时间,c:歌词}
244  };
245  createLrcObj(lrc);
246  var s = "";
247  for (var i in oLRC.ms) {//遍历ms数组，把歌词加入列表
248    s += '<li>' + oLRC.ms[i].c + '</li>';
249  }
250  lrcf.innerHTML = s;
251}
252
253var nextrule = 'repeat';
254
255document.querySelector("#nextrule").onclick = function () {
256  var list = ['repeat', 'repeat-1', 'shuffle'];
257  nextrule = list[(list.indexOf(nextrule) + 1) > 2 ? 0 : (list.indexOf(nextrule) + 1)];
258  this.className = 'bi bi-' + nextrule;
259}
260
261function searchTags(name,callback){
262  jsonp('https://mobiles.kugou.com/api/v3/search/song?format=jsonp&keyword=' + name + '&page=1&pagesize=2&showtype=1',function(res){
263    var hash=res.data.info[0].hash;
264    var albumid=res.data.info[0].album_id;
265    jsonp("https://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash=" + hash +
266    "&dfid=2mScsJ16ucV81qLdzD238ELf&appid=1014&mid=1b211caf58cd1e1fdfea5a4657cc21f5&platid=4&album_id=" + albumid +
267    "&_=" + Date.now(),function(a){
268      callback(a.data);
269    })
270  })
271}
272function jsonp(src,callback){
273  var cbn='a'+Math.random().toString(16).slice(2)+Date.now().toString(16);
274  var s=document.createElement('script');
275  s.src=src+'&callback='+cbn;
276  document.body.append(s);
277  window[cbn]=function(r){
278    delete window[cbn];
279    s.remove();
280    callback(r);
281  }
282}