Merge branch 'feature-pc-choose' into gyt-test

index.html

@@ -43,7 +43,7 @@
   <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
   <script>
     // VConsole will be exported to `window.VConsole` by default.
-    var vConsole = new window.VConsole();
+    // var vConsole = new window.VConsole();
   </script>
 
   <style>

orchestra.html

@@ -43,7 +43,7 @@
 <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
 <script>
   // VConsole will be exported to `window.VConsole` by default.
-  var vConsole = new window.VConsole();
+  // var vConsole = new window.VConsole();
 </script>
   
   <style>

src/pages/detail/runtime.ts

@@ -146,6 +146,8 @@ const state = reactive({
   playIngSpeed: 90,
   /** 上一次app返回的播放进度 */
   preAppAudioPlayTime: 0,
+  /** app返回的音频文件总时长 */
+  appAudioTotalTime: 0,
 })
 
 const syncStepIndex = (i: number) => {
@@ -429,11 +431,11 @@ export const refreshIndex = (ctime?: number) => {
     const index = getIndex(detailState.times, currentTimeNum)
     // 监听app返回的ctime
     // console.log(777777777,index,ctime,state.audiosInstance.audio.currentTime)
-    if (state.evaluatingStatus) {
-      console.log('评测模式','app返回的播放进度',ctime)
-    } else {
-      console.log('练习模式','h5播放器的播放进度',state.audiosInstance.audio.currentTime)
-    }
+    // if (state.evaluatingStatus) {
+    //   console.log('评测模式','app返回的播放进度',ctime)
+    // } else {
+    //   console.log('练习模式','h5播放器的播放进度',state.audiosInstance.audio.currentTime)
+    // }
     dynamicShowPlaySpeed(index);
     state.activeIndex = index
     removeRepateBackground(index)
@@ -591,6 +593,7 @@ export const resetPlayStatus = async (notStop?: boolean) => {
 }
 
 export const play = async () => {
+  console.log('播放执行')
   // 评测是app播放，非h5播放
   if (modelType.value === 'evaluation') return
   if (state.isFirstPlay) {
@@ -612,6 +615,47 @@ export const play = async () => {
   }
 }
 
+const refreshNote = () => {
+  if (state.playState === 'play') {
+    const time = state.preAppAudioPlayTime / 1000;
+    state.currentTimeNum = time
+    refreshPlayer(time)
+    // console.log(66666663333)
+    refreshIndex(time)
+    // 播放到最后一秒，停止播放
+    if (state.appAudioTotalTime > 1000 && state.preAppAudioPlayTime >= state.appAudioTotalTime) {
+      console.log('播放结束123')
+      state.playState = 'pause'
+      state.playEndCallback.endEvaluat()
+      ended(new Event('ended'))
+    }
+  }
+  refreshView()
+}
+
+// 评测播放刷新音符进度
+export const setEvaluatingStep = () => {
+  // console.log('播放状态',state.playState)
+  if (state.playState !== "play") {
+    console.log("暂停播放");
+    return;
+  }
+  let startTime = Date.now();
+  requestAnimationFrame(() => {
+    const endTime = Date.now();
+    // 渲染时间大于16.6,就会让页面卡顿, 如果渲染时间大与16.6就下一个渲染帧去计算
+    if (endTime - startTime < 16.7) {
+      refreshNote()
+      setEvaluatingStep()
+    } else {
+      setTimeout(() => {
+        refreshNote()
+        setEvaluatingStep()
+      }, 16.7);
+    }
+  });
+};
+
 const setDelayTime = async (time: number) => {
   return new Promise((resolve) => {
     setTimeout(() => {
@@ -1072,22 +1116,23 @@ export const setAudioInit = () => {
         return
       }
       state.preAppAudioPlayTime = res?.content?.currentTime
-      requestAnimationFrame(async () => {
-        if (state.playState === 'play') {
-          state.currentTimeNum = time
-          refreshPlayer(time)
-          // console.log(66666663333)
-          refreshIndex(time)
-          // 播放到最后一秒，停止播放
-          if (res?.content?.totalDuration > 1000 && res?.content?.currentTime >= res?.content?.totalDuration) {
-            console.log('播放结束123')
-            state.playState = 'pause'
-            state.playEndCallback.endEvaluat()
-            ended(new Event('ended'))
-          }
-        }
-        refreshView()
-      })
+      state.appAudioTotalTime = res?.content?.totalDuration
+      // requestAnimationFrame(async () => {
+      //   if (state.playState === 'play') {
+      //     state.currentTimeNum = time
+      //     refreshPlayer(time)
+      //     // console.log(66666663333)
+      //     refreshIndex(time)
+      //     // 播放到最后一秒，停止播放
+      //     if (res?.content?.totalDuration > 1000 && res?.content?.currentTime >= res?.content?.totalDuration) {
+      //       console.log('播放结束123')
+      //       state.playState = 'pause'
+      //       state.playEndCallback.endEvaluat()
+      //       ended(new Event('ended'))
+      //     }
+      //   }
+      //   refreshView()
+      // })
     }
   });
   state.audiosInstance.event.on('timeupdate', () => {

src/subpages/colexiu/buttons/evaluating.tsx

@@ -731,6 +731,7 @@ const evaluatStart = () => {
       backtime = Date.now()
       evaluating.value = true
       runtime.playState = "play";
+      RuntimeUtils.setEvaluatingStep()
       if (detailState.activeDetail?.midiUrl) {
         console.log('midiUrl', detailState.activeDetail?.midiUrl)
         setTimeout(() => {