部分浏览器 播放进度 回退问题

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -26,7 +26,9 @@ type smoothAnimationType = {
    batePos: pointsPosType
    pointsPos: pointsPosType
    translateXNum: number
-   aveSpeed: number
+   aveSpeed: number,
+   pageTurnLock: boolean
+   oldCurrentTime: number
 }
 
 let _numberOfSegments = 56 // 中间切割线的个数
@@ -50,7 +52,9 @@ export const smoothAnimationState = {
    batePos: [], // times 直接转换的数组
    pointsPos: [], // 筛选之后的点坐标数组
    translateXNum: 0, // 当前谱面的translateX的距离   谱面的位置信息 由translateX和scrollLeft的偏移一起决定
-   aveSpeed: 0 // 谱面的一帧的平均速度
+   aveSpeed: 0, // 谱面的一帧的平均速度
+   pageTurnLock: false,
+   oldCurrentTime: 0
 } as smoothAnimationType
 
 // 监听显示与隐藏
@@ -151,7 +155,9 @@ export function destroySmoothAnimation() {
       batePos: [],
       pointsPos: [],
       translateXNum: 0,
-      aveSpeed: 0
+      aveSpeed: 0,
+      pageTurnLock: false,
+      oldCurrentTime: 0
    })
 }
 
@@ -164,6 +170,11 @@ export function moveSmoothAnimationByPlayTime(time?: number) {
       return
    }
    const currentTime = time || getAudioCurrentTime()
+   // 某些浏览器 音频暂停后返回的时间会倒退，把这种时间过滤掉
+   if(currentTime < smoothAnimationState.oldCurrentTime) {
+      return
+   }
+   smoothAnimationState.oldCurrentTime = currentTime
    if (currentTime <= state.fixtime) return
    if (currentTime > state.times.last()?.endtime) return
    // 当休止小节，可能当前音符在谱面上没有实际的音符（没有bbox），所以往后找谱面上有的音符
@@ -221,9 +232,8 @@ export function moveSmoothAnimation(progress: number, activeIndex: number, isMov
 /**
  * 谱面翻页逻辑
  */
-let pageTurnLock = false
 function pageTurn_osmd(nowPointsPos: pointsPosType[0]) {
-   if (pageTurnLock) return
+   if (smoothAnimationState.pageTurnLock) return
    // 视口宽度
    const clientWidth = smoothAnimationState.osdmScrollDomWith
    let { left, right } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
@@ -243,7 +253,7 @@ function pageTurn_osmd(nowPointsPos: pointsPosType[0]) {
          if (smoothAnimationState.translateXNum > maxTranslateXNum) {
             smoothAnimationState.translateXNum = maxTranslateXNum
          }
-         pageTurnLock = true
+         smoothAnimationState.pageTurnLock = true
          moveTranslateXNum(smoothAnimationState.translateXNum)
       }
    }
@@ -330,7 +340,7 @@ export function moveTranslateXNum(translateXNum: number) {
       smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transition = "")
       smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transition = "")
       smoothAnimationState.selectionBgBoxDom && (smoothAnimationState.selectionBgBoxDom.style.transition = "")
-      pageTurnLock = false
+      smoothAnimationState.pageTurnLock = false
    } else {
       smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transform = `translateX(-${translateXNum}px)`)
       smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transform = `translateX(-${translateXNum}px)`)
@@ -357,7 +367,7 @@ function createSmoothAnimation() {
    const osmdCanvasPageDom = document.querySelector("#osmdCanvasPage1") as HTMLElement
    smoothAnimationState.osmdCanvasPageDom = osmdCanvasPageDom
    smoothAnimationState.osmdCanvasPageDom.addEventListener("transitionend", () => {
-      pageTurnLock = false
+      smoothAnimationState.pageTurnLock = false
    })
    // selectionBox
    setTimeout(() => {
@@ -443,8 +453,8 @@ function getPointsPosByBatePos(): pointsPosType {
    }
    extendPoint.MeasureNumberXML += 100 // 防止MeasureNumberXML重复
    extendPoint.noteId += 100 // 防止noteId重复
-   // 当总长度减10 和 最后一个音符加 10 取最大值 34是一倍的边距
-   extendPoint.x = Math.max(smoothAnimationState.canvasDomWith - 34 * state.zoom - 10, extendPoint.x + 10)
+   // 当总长度减20 和 最后一个音符加 10 取最大值 34是一倍的边距
+   extendPoint.x = Math.max(smoothAnimationState.canvasDomWith - 34 * state.zoom - 20, extendPoint.x + 10)
    pointsPos.push(extendPoint)
    return pointsPos
 }

src/state.ts

@@ -773,6 +773,8 @@ const handlePlaying = () => {
 export const skipNotePlay = async (itemIndex: number, isStart = false) => {
   if (state.isPreView) return;
   console.log('点击音符')
+  // 点击或者重播的时候清除一行谱的时间信息
+  state.isSingleLine && (smoothAnimationState.oldCurrentTime = 0)
   const item = state.times[itemIndex];
   let itemTime = item.time;
   if (isStart) {