feat: 跟练播放'叮咚'节拍器

src/helpers/metronome.ts

@@ -28,6 +28,7 @@ export const metronomeData = reactive({
 	activeMetro: {} as any,
 	cursorMode: 1 as number, // 光标模式：1:音符指针；2:节拍指针；3:关闭指针
 	cursorTips: '' as string, // 光标模式提示文字
+	followAudioIndex: 0,
 });
 
 watch(
@@ -146,6 +147,18 @@ class Metronome {
 		this.source.play();
 	};
 
+	/**
+	 * 跟练模式播放，跟练模式没有音频播放器，所以没有音频的时间，设定固定时间间隔播放
+	 */
+	simulatePlayAudio = () => {
+		// console.log(333, metronomeData.followAudioIndex)
+		if (!metronomeData.initPlayerState) return;
+		this.source = metronomeData.followAudioIndex === 0 ? this.source1 : this.source2;
+		this.source.volume(metronomeData.disable ? 0 : 0.4);
+		this.source.play();
+		metronomeData.followAudioIndex = metronomeData.followAudioIndex === 0 ? 1 : 0;
+	};
+
 	// 切换
 	selectPlay() {}
 
@@ -280,6 +293,7 @@ class Metronome {
 		// 5.得到所有的节拍时间
 		metronomeData.metroList = metroList;
 		metronomeData.metroMeasure = metroMeasure;
+		// console.log(9999,metroList,7777,metroMeasure)
 		metronomeData.activeMetro = metroMeasure[0]?.[0] || {};
 	}
 }

src/state.ts

@@ -13,6 +13,7 @@ import { api_createMusicPlayer } from "./helpers/communication";
 import { verifyCanRepeat } from "./helpers/formateMusic";
 import { getMusicSheetDetail } from "./utils/baseApi"
 import { getQuery } from "/src/utils/queryString";
+import { followData } from "/src/view/follow-practice/index"
 
 const query: any = getQuery();
 
@@ -869,4 +870,24 @@ const setCustom = (trackNum?: number) => {
   if (trackNum || state.extConfigJson.multitrack) {
     setGlobalData("multitrack", trackNum || state.extConfigJson.multitrack);
   }
+};
+
+/** 跟练模式播放节拍器（叮咚） */
+export const followBeatPaly = () => {
+  if (!followData.start) {
+    return;
+  }
+  let startTime = 0;
+  requestAnimationFrame(() => {
+    const endTime = Date.now();
+    if (endTime - startTime < 1000) {
+      followBeatPaly();
+    } else {
+      setTimeout(() => {
+        metronomeData.metro?.simulatePlayAudio()
+        startTime = Date.now();
+        followBeatPaly();
+      }, 700);
+    }
+  });
 };

src/view/follow-practice/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
-import state, { gotoNext, resetPlaybackToStart } from "/src/state";
+import state, { gotoNext, resetPlaybackToStart, followBeatPaly } from "/src/state";
 import { IPostMessage } from "/src/utils/native-message";
 import { api_cloudFollowTime, api_cloudToggleFollow } from "/src/helpers/communication";
 import { storeData } from "/src/store";
@@ -67,13 +67,13 @@ const onClear = () => {
 
 /** 开始跟练 */
 export const handleFollowStart = async () => {
-	// 跟练模式开始前，增加播放系统节拍器
-	const tickend = await handleStartTick();
-	// console.log("🚀 ~ tickend:", tickend)
-	// 节拍器返回false, 取消播放
-	if (!tickend) {
-		return false;
-	}
+	// // 跟练模式开始前，增加播放系统节拍器
+	// const tickend = await handleStartTick();
+	// // console.log("🚀 ~ tickend:", tickend)
+	// // 节拍器返回false, 取消播放
+	// if (!tickend) {
+	// 	return false;
+	// }
 	onClear();
 	followData.start = true;
 	followData.index = 0;
@@ -81,6 +81,7 @@ export const handleFollowStart = async () => {
 	resetPlaybackToStart();
 	openToggleRecord(true);
 	getNoteIndex();
+	followBeatPaly();
 };
 /** 结束跟练 */
 export const handleFollowEnd = () => {