优化播放节拍器

src/page-colexiu/evaluat-model/index.module.less

@@ -6,19 +6,17 @@
 
 .btn {
     position: fixed;
-    bottom: 33px;
     left: 50%;
-    transform: translateX(-50%);
-    width: 115px;
-    height: 38px;
-    line-height: 38px;
-    background: var(--van-primary-color);
-    border-radius: 20px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #FFFFFF;
-    text-align: center;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 130px;
+    height: 130px;
     z-index: 10;
+    & > img {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .endBtn {

src/state.ts

@@ -232,6 +232,11 @@ export const togglePlay = async (playState?: "play" | "paused") => {
 	if (state.playState === "play" && state.needTick) {
 		const tickend = await handleStartTick();
 		// console.log("🚀 ~ tickend:", tickend)
+		// 节拍器返回false, 取消播放
+		if (!tickend) {
+			state.playState = "paused";
+			return
+		};
 	}
 	if (state.playState == "play") {
 		// 如果没有选段结束开始播放,清空选段状态

src/view/tick/index.tsx

@@ -3,12 +3,13 @@ import tockAndTick from "/src/constant/tockAndTick.json";
 import { Howl } from "howler";
 import { Popup } from "vant";
 import styles from "./index.module.less";
-import { handleRessetState } from "/src/state";
 
 const tickData = reactive({
 	list: [] as number[],
-	timerList: [] as any[],
 	len: 0,
+	tickEnd: false,
+	/** 节拍器时间 */
+	beatLengthInMilliseconds: 0,
 	state: "",
 	source1: "" as unknown as Howl,
 	source2: "" as unknown as Howl,
@@ -16,33 +17,31 @@ const tickData = reactive({
 	show: false,
 });
 
-const handlePlay = (t: number, i: number) => {
+const handlePlay = (i: number, source: Howl | null) => {
 	return new Promise((resolve) => {
-		const timer = setTimeout(() => {
+		setTimeout(() => {
+			if (tickData.tickEnd) {
+				resolve(i)
+				return
+			};
 			tickData.index++;
-			const source = i === 0 ? tickData.source1 : i === tickData.list.length - 1 ? ("" as unknown as Howl) : tickData.source2;
 			if (source) source.play();
-			resolve(t);
-		}, t);
-		tickData.timerList.push(timer);
+			resolve(i);
+		}, tickData.beatLengthInMilliseconds);
 	});
 };
 
 /** 设置节拍器 */
 export const handleInitTick = (beatLengthInMilliseconds: number, beat: number) => {
-	const base = 500;
 	tickData.state = "";
-	tickData.list = [];
+	tickData.beatLengthInMilliseconds = beatLengthInMilliseconds
 	tickData.len = beat;
-	for (let i = 0; i < beat; i++) {
-		tickData.list.push(beatLengthInMilliseconds * i + base);
-	}
-	tickData.list.push(beatLengthInMilliseconds * beat + base);
 };
 
 /** 开始节拍器 */
 export const handleStartTick = async () => {
 	tickData.show = true;
+	tickData.tickEnd = false;
 	if (tickData.state !== "ok") {
 		tickData.source1 = new Howl({
 			src: tockAndTick.tick,
@@ -53,11 +52,14 @@ export const handleStartTick = async () => {
 		tickData.state = "ok";
 	}
 	tickData.index = 0;
-    tickData.timerList = []
-	const playList = tickData.list.map((t: number, i: number) => handlePlay(t, i));
-	await Promise.all(playList);
+	for(let i = 0; i <= tickData.len; i++){
+		// 提前结束, 直接放回false
+		if (tickData.tickEnd) return false;
+		const source = i === 0 ? tickData.source1 : i === tickData.len ? null : tickData.source2;
+		await handlePlay(i, source)
+	}
 	tickData.show = false;
-	return Promise.resolve(tickData.list);
+	return true
 };
 
 export default defineComponent({
@@ -65,10 +67,8 @@ export default defineComponent({
 	setup() {
 		/** 手动关闭 */
 		const handleClose = () => {
-			handleRessetState();
-            tickData.timerList.forEach((t) => {
-                clearTimeout(t)
-            })
+			tickData.tickEnd = true
+			// handleRessetState();
 		};
 		return () => (
 			<Popup class={styles.popup} v-model:show={tickData.show} closeable onClickCloseIcon={handleClose}>