优化歌词播放器

src/renderer/utils/lyric-font-player/font-player.js

@@ -36,7 +36,7 @@ module.exports = class FontPlayer {
     this.curFontNum = 0
     this.maxFontNum = 0
     this._performanceTime = 0
-    this._performanceOffsetTime = 0
+    this._startTime = 0
 
     this.fontContent = null
 
@@ -141,12 +141,12 @@ module.exports = class FontPlayer {
   }
 
   _currentTime() {
-    return getNow() - this._performanceTime + this._performanceOffsetTime
+    return getNow() - this._performanceTime + this._startTime
   }
 
-  _findcurFontNum(curTime) {
+  _findcurFontNum(curTime, startIndex = 0) {
     const length = this.fonts.length
-    for (let index = 0; index < length; index++) if (curTime <= this.fonts[index].startTime) return index === 0 ? 0 : index - 1
+    for (let index = startIndex; index < length; index++) if (curTime < this.fonts[index].startTime) return index == 0 ? 0 : index - 1
     return length - 1
   }
 
@@ -195,9 +195,8 @@ module.exports = class FontPlayer {
   _refresh() {
     this.curFontNum++
     // console.log('curFontNum time', this.fonts[this.curFontNum].time)
-    if (this.curFontNum === this.maxFontNum) return this._handlePlayMaxFontNum()
+    if (this.curFontNum >= this.maxFontNum) return this._handlePlayMaxFontNum()
     let curFont = this.fonts[this.curFontNum]
-    let nextFont = this.fonts[this.curFontNum + 1]
     // console.log(curFont, nextFont, this.curFontNum, this.maxFontNum)
     const currentTime = this._currentTime()
     // console.log(curFont.text)
@@ -206,27 +205,38 @@ module.exports = class FontPlayer {
     // console.log(currentTime, driftTime)
 
     if (driftTime >= 0 || this.curFontNum == 0) {
+      let nextFont = this.fonts[this.curFontNum + 1]
       this.delay = nextFont.startTime - curFont.startTime - driftTime
       if (this.delay > 0) {
+        if (this.isPlay) {
+          this.timeoutTools.start(() => {
+            if (!this.isPlay) return
+            this._refresh()
+          }, this.delay)
+        }
         this._handlePlayFont(curFont, driftTime)
-        this.timeoutTools.start(() => {
-          if (!this.isPlay) return
-          this._refresh()
-        }, this.delay)
+        return
+      } else {
+        let newCurLineNum = this._findcurFontNum(currentTime, this.curFontNum + 1)
+        if (newCurLineNum > this.curFontNum) this.curFontNum = newCurLineNum - 1
+        for (let i = 0; i <= this.curFontNum; i++) this._handlePlayFont(this.fonts[i], 0, true)
+        this._refresh()
         return
       }
     } else if (this.curFontNum == 0) {
       this.curFontNum--
-      this.waitPlayTimeout.start(() => {
-        if (!this.isPlay) return
-        this._refresh()
-      }, -driftTime)
+      if (this.isPlay) {
+        this.waitPlayTimeout.start(() => {
+          if (!this.isPlay) return
+          this._refresh()
+        }, -driftTime)
+      }
       return
     }
 
-    this.curFontNum = this._findcurFontNum(currentTime)
-    for (let i = 0; i < this.curFontNum; i++) this._handlePlayFont(this.fonts[i], 0, true)
-    this.curFontNum--
+    this.curFontNum = this._findcurFontNum(currentTime, this.curFontNum) - 1
+    for (let i = 0; i <= this.curFontNum; i++) this._handlePlayFont(this.fonts[i], 0, true)
+    // this.curFontNum--
     this._refresh()
   }
 
@@ -237,14 +247,11 @@ module.exports = class FontPlayer {
 
     if (this.isLineMode) return this._handlePlayLine(true)
     this.isPlay = true
-    this._performanceTime = getNow() - curTime
-    this._performanceOffsetTime = 0
-    if (this._performanceTime < 0) {
-      this._performanceOffsetTime = -this._performanceTime
-      this._performanceTime = 0
-    }
+    this._performanceTime = getNow()
+    this._startTime = curTime
 
     this.curFontNum = this._findcurFontNum(curTime)
+
     for (let i = this.curFontNum; i > -1; i--) {
       this._handlePlayFont(this.fonts[i], 0, true)
     }

src/renderer/utils/lyric-font-player/index.js

@@ -7,7 +7,7 @@ module.exports = class Lyric {
   constructor({
     lyric = '',
     translationLyric = '',
-    offset = 150,
+    offset = 0,
     lineClassName = '',
     fontClassName = 'font',
     translationClassName = 'translation',
@@ -166,5 +166,6 @@ module.exports = class Lyric {
     this.lyric = lyric
     this.translationLyric = translationLyric
     this._init()
+    this.linePlayer.offset = this.isLineMode ? this.offset + 150 : this.offset
   }
 }

src/renderer/utils/lyric-font-player/line-player.js

@@ -26,7 +26,7 @@ module.exports = class LinePlayer {
     this.offset = offset
     this.isOffseted = false
     this._performanceTime = 0
-    this._performanceOffsetTime = 0
+    this._startTime = 0
     this._init()
   }
 
@@ -93,12 +93,12 @@ module.exports = class LinePlayer {
   }
 
   _currentTime() {
-    return getNow() - this._performanceTime + this._performanceOffsetTime
+    return getNow() - this._performanceTime + this._startTime
   }
 
-  _findCurLineNum(curTime) {
+  _findCurLineNum(curTime, startIndex = 0) {
     const length = this.lines.length
-    for (let index = 0; index < length; index++) if (curTime <= this.lines[index].time) return index === 0 ? 0 : index - 1
+    for (let index = startIndex; index < length; index++) if (curTime <= this.lines[index].time) return index === 0 ? 0 : index - 1
     return length - 1
   }
 
@@ -110,30 +110,40 @@ module.exports = class LinePlayer {
   _refresh() {
     this.curLineNum++
     // console.log('curLineNum time', this.lines[this.curLineNum].time)
+    if (this.curLineNum >= this.maxLine) return this._handleMaxLine()
+
     let curLine = this.lines[this.curLineNum]
-    let nextLine = this.lines[this.curLineNum + 1]
+
     const currentTime = this._currentTime()
     const driftTime = currentTime - curLine.time
 
     if (driftTime >= 0 || this.curLineNum === 0) {
-      if (this.curLineNum === this.maxLine) return this._handleMaxLine()
+      let nextLine = this.lines[this.curLineNum + 1]
       this.delay = nextLine.time - curLine.time - driftTime
+
       if (this.delay > 0) {
         if (!this.isOffseted && this.delay >= this.offset) {
-          this._performanceOffsetTime += this.offset
+          this._startTime += this.offset
           this.delay -= this.offset
           this.isOffseted = true
         }
-        timeoutTools.start(() => {
-          if (!this.isPlay) return
-          this._refresh()
-        }, this.delay)
+        if (this.isPlay) {
+          timeoutTools.start(() => {
+            if (!this.isPlay) return
+            this._refresh()
+          }, this.delay)
+        }
         this.onPlay(this.curLineNum, curLine.text, currentTime)
         return
+      } else {
+        let newCurLineNum = this._findCurLineNum(currentTime, this.curLineNum + 1)
+        if (newCurLineNum > this.curLineNum) this.curLineNum = newCurLineNum - 1
+        this._refresh()
+        return
       }
     }
 
-    this.curLineNum = this._findCurLineNum(currentTime) - 1
+    this.curLineNum = this._findCurLineNum(currentTime, this.curLineNum) - 1
     this._refresh()
   }
 
@@ -142,12 +152,8 @@ module.exports = class LinePlayer {
     this.pause()
     this.isPlay = true
 
-    this._performanceOffsetTime = 0
-    this._performanceTime = getNow() - curTime
-    if (this._performanceTime < 0) {
-      this._performanceOffsetTime = -this._performanceTime
-      this._performanceTime = 0
-    }
+    this._performanceTime = getNow()
+    this._startTime = curTime
 
     this.curLineNum = this._findCurLineNum(curTime) - 1