卧槽,我曾经搞了个极简的音乐播放器
不过,是直接获取标准格式的lrc文件,然后前端分割。
然后我的方法不是数组遍历,因为前端js里面一切皆对象,对象的查找快多了。
代码
https://github.com/anchengjia...
思路:
把分割音频后按照起始点向下取整存一个对象,然后currentTime每次向下取整,然后比较两个数字进行比较,如果一样,不管,不然就++,用++后的值匹配成一个选择器,直接去dom里面找是都存在,然后继续。
updateLyric(ev) {
let audio = ev.target;
// currentTime
var currentTime = ~~audio.currentTime;
if (!this.source.lrc[currentTime] || this.currentTime === currentTime) return;
this.currentTime = currentTime;
this.currentLine++;
if (this.currentEle) this.currentEle.classList.remove('on');
this.currentEle = this.lrcList.querySelector(`li:nth-child(${this.currentLine})`);
this.currentEle.classList.add('on');
if (this.currentLine > 5 && this.currentLine + 5 <= this.source.len) this.lrcList.scrollTop = (this.currentLine - 5) * this.lineHeight;
}