新增播放速率调整功能

src/common/defaultSetting.ts

@@ -25,6 +25,7 @@ const defaultSetting: LX.AppSetting = {
   'player.isShowTaskProgess': true,
   'player.volume': 1,
   'player.isMute': false,
+  'player.playbackRate': 1,
   'player.mediaDeviceId': 'default',
   'player.isMediaDeviceRemovedStopPlay': false,
   'player.isShowLyricTranslation': false,

src/common/types/app_setting.d.ts

@@ -108,6 +108,11 @@ declare global {
        */
       'player.isMute': boolean
 
+      /**
+       * 播放速率
+       */
+      'player.playbackRate': number
+
       /**
        * 音频输出设备id
        */

src/common/types/desktop_lyric.d.ts

@@ -62,6 +62,7 @@ declare namespace LX {
     | LyricAction<'set_status', {
       isPlay: boolean
       line: number
+      rate: number
       played_time: number
     }>
     | LyricAction<'set_lyric', {
@@ -71,6 +72,7 @@ declare namespace LX {
       lxlrc: string | null
     }>
     | LyricAction<'set_offset', number>
+    | LyricAction<'set_playbackRate', number>
     | LyricAction<'set_play', number>
     | LyricAction<'set_pause'>
     | LyricAction<'set_stop'>

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

@@ -28,6 +28,7 @@ const createAnimation = (dom, duration, isVertical) => new window.Animation(new
 module.exports = class FontPlayer {
   constructor({
     time = 0,
+    rate = 1,
     lyric = '',
     lineContentClassName = 'line-content',
     lineClassName = 'line',
@@ -43,6 +44,8 @@ module.exports = class FontPlayer {
     this.time = time
     this.lyric = lyric
 
+    this._rate = rate
+
     this.isVertical = isVertical
 
     this.lineContentClassName = lineContentClassName
@@ -136,7 +139,7 @@ module.exports = class FontPlayer {
 
       const dom = document.createElement('span')
       dom.textContent = text
-      const animation = createAnimation(dom, time, this.isVertical)
+      const animation = createAnimation(dom, time / this._rate, this.isVertical)
       this.lrcContent.appendChild(dom)
       // lineText += text
 
@@ -186,7 +189,7 @@ module.exports = class FontPlayer {
   }
 
   _currentTime() {
-    return getNow() - this._performanceTime + this._startTime
+    return (getNow() - this._performanceTime) * this._rate + this._startTime
   }
 
   _findcurFontNum(curTime, startIndex = 0) {
@@ -201,7 +204,7 @@ module.exports = class FontPlayer {
     const currentTime = this._currentTime()
     const driftTime = currentTime - curFont.startTime
     if (currentTime > curFont.startTime + curFont.time) {
-      this._handlePlayFont(curFont, driftTime, true)
+      this._handlePlayFont(curFont, driftTime / this._rate, true)
       this.lineContent.classList.add('played')
       this.isPlay = false
       this.pause()
@@ -257,13 +260,13 @@ module.exports = class FontPlayer {
 
     if (driftTime >= 0 || this.curFontNum == 0) {
       let nextFont = this.fonts[this.curFontNum + 1]
-      this.delay = nextFont.startTime - curFont.startTime - driftTime
-      if (this.delay > 0) {
+      const delay = (nextFont.startTime - curFont.startTime - driftTime) / this._rate
+      if (delay > 0) {
         if (this.isPlay) {
           this.timeoutTools.start(() => {
             if (!this.isPlay) return
             this._refresh()
-          }, this.delay)
+          }, delay)
         }
         this._handlePlayFont(curFont, driftTime)
         return
@@ -342,6 +345,13 @@ module.exports = class FontPlayer {
     this.curFontNum = this.maxFontNum
   }
 
+  setPlaybackRate(rate) {
+    this._rate = rate
+    if (!this.lines.length) return
+    if (!this.isPlay) return
+    this.play(this._currentTime())
+  }
+
   reset() {
     this.pause()
     if (this.isLineMode) return this._handlePlayLine(false)

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

@@ -8,6 +8,7 @@ module.exports = class Lyric {
     lyric = '',
     extendedLyrics = [],
     offset = 0,
+    rate = 1,
     lineContentClassName = 'line-content',
     lineClassName = 'line',
     shadowClassName = 'shadow',
@@ -25,6 +26,7 @@ module.exports = class Lyric {
     this.lyric = lyric
     this.extendedLyrics = extendedLyrics
     this.offset = offset
+    this.rate = rate
     this.onPlay = onPlay
     this.onSetLyric = onSetLyric
     this.onUpdateLyric = onUpdateLyric
@@ -50,6 +52,7 @@ module.exports = class Lyric {
 
     this.linePlayer = new LinePlayer({
       offset: this.offset,
+      rate: this.rate,
       onPlay: this._handleLinePlayerOnPlay,
       onSetLyric: this._handleLinePlayerOnSetLyric,
     })
@@ -116,6 +119,7 @@ module.exports = class Lyric {
       this._lines = lyricLines.map(line => {
         const fontPlayer = new FontPlayer({
           time: line.time,
+          rate: this.rate,
           lyric: line.text,
           extendedLyrics: line.extendedLyrics,
           lineContentClassName: this.lineContentClassName,
@@ -141,6 +145,7 @@ module.exports = class Lyric {
       this._lines = lyricLines.map(line => {
         const fontPlayer = new FontPlayer({
           time: line.time,
+          rate: this.rate,
           lyric: line.text,
           extendedLyrics: line.extendedLyrics,
           lineContentClassName: this.lineContentClassName,
@@ -200,6 +205,17 @@ module.exports = class Lyric {
     this._init()
   }
 
+  setPlaybackRate(rate) {
+    this.rate = rate
+    this.linePlayer.setPlaybackRate(rate)
+    this._initLines(this.initInfo.lines, this.initInfo.offset, true)
+    if (this.linePlayer.isPlay) {
+      const num = this.playingLineNum
+      this.playingLineNum = 0
+      this._handleLinePlayerOnPlay(num, '', this.linePlayer._currentTime())
+    } else this.playingLineNum = 0
+  }
+
   setVertical(isVertical) {
     this.isVertical = isVertical
     this._initLines(this.initInfo.lines, this.initInfo.offset, true)

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

@@ -38,7 +38,7 @@ const parseExtendedLyric = (lrcLinesMap, extendedLyric) => {
 }
 
 module.exports = class LinePlayer {
-  constructor({ offset = 0, onPlay = function() { }, onSetLyric = function() { } } = {}) {
+  constructor({ offset = 0, rate = 1, onPlay = function() { }, onSetLyric = function() { } } = {}) {
     this.tags = {}
     this.lines = null
     this.onPlay = onPlay
@@ -49,6 +49,7 @@ module.exports = class LinePlayer {
     this.offset = offset
     this._performanceTime = 0
     this._startTime = 0
+    this._rate = rate
   }
 
   _init() {
@@ -119,7 +120,7 @@ module.exports = class LinePlayer {
   }
 
   _currentTime() {
-    return getNow() - this._performanceTime + this._startTime
+    return (getNow() - this._performanceTime) * this._rate + this._startTime
   }
 
   _findCurLineNum(curTime, startIndex = 0) {
@@ -146,14 +147,14 @@ module.exports = class LinePlayer {
 
     if (driftTime >= 0 || this.curLineNum === 0) {
       let nextLine = this.lines[this.curLineNum + 1]
-      this.delay = nextLine.time - curLine.time - driftTime
+      const delay = (nextLine.time - curLine.time - driftTime) / this._rate
 
-      if (this.delay > 0) {
+      if (delay > 0) {
         if (this.isPlay) {
           timeoutTools.start(() => {
             if (!this.isPlay) return
             this._refresh()
-          }, this.delay)
+          }, delay)
         }
         this.onPlay(this.curLineNum, curLine.text, currentTime)
         return
@@ -195,6 +196,13 @@ module.exports = class LinePlayer {
     }
   }
 
+  setPlaybackRate(rate) {
+    this._rate = rate
+    if (!this.lines.length) return
+    if (!this.isPlay) return
+    this.play(this._currentTime())
+  }
+
   setLyric(lyric, extendedLyrics) {
     // console.log(extendedLyrics)
     if (this.isPlay) this.pause()