feat: 选段展示预备小节速度功能开发

src/pages/detail/helpers.ts

@@ -1593,7 +1593,7 @@ export const setSettionBackground = () => {
     const measureListIndex = activeNote.sourceMeasure.measureListIndex
 
     // 如果没有节拍器,默认提前一个小节
-    if (index === 0 && measureListIndex !== 0 && !state.needTick) {
+    if (index === 0 && measureListIndex !== 0) {
       const firstNote = getFirsrNoteByMeasureListIndex(measureListIndex - 1)
       const fnote = firstNote?.noteElement
       if (fnote) {

src/pages/detail/runtime.ts

@@ -335,7 +335,7 @@ export const changeSpeed = (speed: number, isSave: boolean = true) => {
   state.speed = speed
   state.playIngSpeed = speed
   // 当前的音符
-  const currentItem: any = (detailState.sectionStatus && detailState.section.length === 2) ? detailState.section[0] : detailState.times[state.activeIndex];
+  const currentItem: any = (detailState.sectionStatus && detailState.section.length === 2) ? detailState.befireSection || detailState.section[0] : detailState.times[state.activeIndex];
   state.basePlayRate = currentItem?.measureSpeed ? state.speed / currentItem.measureSpeed : state.speed / detailState.baseSpeed;
   if (!detailState.activeDetail) return
   state.audiosInstance?.setSpeed(state.basePlayRate)
@@ -364,7 +364,8 @@ export const resetCursor = () => {
     } else {
       state.osmd.cursor.reset()
     }
-    state.osmd.cursor.hide()
+    // 隐藏音符指针
+    // state.osmd.cursor.hide()
     detailState.fixedKey = 0
   }
 }
@@ -400,8 +401,8 @@ export const refreshIndexBase = (index: number) => {
 
 // 练习模式下，开始播放时，记录mp3的播放倍率
 export const initSetPlayRate = () => {
-  const item: any = (detailState.sectionStatus && detailState.section.length === 2) ? detailState.section[0] : detailState.times[state.activeIndex];
-  if (item && modelType.value === "practice" && item.measureSpeed) {
+  const item: any = (detailState.sectionStatus && detailState.section.length === 2) ? detailState.befireSection || detailState.section[0] : detailState.times[state.activeIndex];
+  if (item && item.measureSpeed) {
     const ratio = state.speed / item.measureSpeed
     // state.audiosInstance?.setSpeed(ratio)
     state.basePlayRate = ratio || 1;
@@ -674,7 +675,7 @@ const setDelayTime = async (time: number) => {
  */
 export const pause = async () => {
   if (detailState.sectionStatus) {
-    state.osmd.cursor.hide()
+    // state.osmd.cursor.hide()
   }
   if (detailState.activeDetail.isAppPlay) {
     await syncPlayState()
@@ -790,19 +791,21 @@ export const getFirsrNoteByMeasureListIndex = (index: number, tie = true) => {
   return null
 }
 
+// 设置当前的播放时间，和光标的位置
 export const setSectionModeCurrentTime = () => {
-  if (detailState.needTick) {
-    setCurrentTime(detailState.section[0].sourceStartTime || detailState.section[0].time)
-  } else {
-    const measureListIndex = detailState.section[0].noteElement?.sourceMeasure?.measureListIndex
-    if (measureListIndex > 0) {
-      setCurrentTime(getFirsrNoteByMeasureListIndex(measureListIndex - 1).time)
-      // 如果没有节拍器,默认提前一个小节
-      // setCurrentTime(getFirsrNoteByMeasureListIndex(measureListIndex).time)
-      detailState.sectionFlash = true
-    } else {
-      setCurrentTime(0)
+  console.log(detailState.needTick, 'setSectionModeCurrentTime')
+  if (detailState.section.length === 2) {
+      // 预备小节的小节数
+    const preMeasureNum = detailState.befireSection?.measureNumberPrinted;
+    let preNoteNum = detailState.section[0].i - 1;
+    while (preMeasureNum === detailState.times[preNoteNum]?.measureNumberPrinted && preNoteNum >= 1 && preMeasureNum === detailState.times[preNoteNum-1].measureNumberPrinted) {
+      preNoteNum -= 1;
     }
+    const preTime = detailState.befireSection ? detailState.times[preNoteNum].time : detailState.section[0].time
+    detailState.sectionFlash = true
+    setCurrentTime(preTime)
+  } else {
+    setCurrentTime(0)
   }
 }
 
@@ -987,6 +990,7 @@ export const setPlayState = async () => {
     await toggleState()
     return
   }
+  initSetPlayRate();
   setPlayerView()
   setTick(setTickStop)
 }

src/pages/detail/section-box/index.tsx

@@ -3,7 +3,7 @@ import { defineComponent, watchEffect, TransitionGroup, ref, Ref, reactive } fro
 import event from '/src/components/music-score/event'
 import SettingState from '/src/pages/detail/setting-state'
 import state from '../state'
-import runtime, { getFirsrNoteByMeasureListIndex, getBoundingBoxByNote, changeSpeed } from '../runtime'
+import runtime, { getFirsrNoteByMeasureListIndex, getBoundingBoxByNote, changeSpeed, setStepView } from '../runtime'
 import { getActtiveNoteByTimes, getBoundingBoxByverticalNote, getNoteBySlursStart, setSettionBackground } from '../helpers'
 import { formatZoom } from '/src/helpers/utils'
 import styles from './index.module.less'
@@ -89,6 +89,10 @@ export default defineComponent({
   },
   methods: {
     setSection(evt: MouseEvent) {
+      // 已经选段后，再次点击音符直接return，不需要重新处理
+      if (state.section.length === 2) {
+        return
+      }
       const activeNote = getActtiveNoteByTimes(evt)
       if (activeNote && state.section.length < 2) {
         const sectionLength = state.section.length
@@ -99,16 +103,17 @@ export default defineComponent({
         if (sectionLength === 1) {
           const note = getNoteBySlursStart(activeNote, true, 'end')
           state.section.push(state.times[note.i - note.si + note.noteLength - 1])
-          // 选段状态需要重置播放倍率为1
-          runtime.basePlayRate = 1;
-          const currentItem: any = state.section[0];
-          const currentSpeed = currentItem?.measureSpeed ? currentItem.measureSpeed : state.activeSpeed;
-          changeSpeed(currentSpeed)
         }
       }
-      if (state.section.length === 2) {
+      if (state.section.length === 2 && runtime.playState !== 'play') {
         Toast.clear()
         setSettionBackground()
+        // 选段状态需要重置播放倍率为1
+        runtime.basePlayRate = 1;
+        const currentItem: any = state.befireSection || state.section[0];
+        const currentSpeed = currentItem?.measureSpeed ? currentItem.measureSpeed : state.activeSpeed;
+        changeSpeed(currentSpeed)
+        setStepView(currentItem)
       }
     },
     sectionClick(evt: MouseEvent): void {

src/pages/detail/tick-popup/index.tsx

@@ -45,6 +45,7 @@ export default defineComponent({
           display: 'flex',
           background: 'transparent',
         }}
+        teleport="body"
       >
         <Tick
           dots={(runtime as any)?.osmd?.numerator || getDuration((runtime as any).osmd).numerator || 0}