点击一直播放

src/page-instrument/view-figner/index.tsx

@@ -34,6 +34,7 @@ export default defineComponent({
 			notes: [] as IFIGNER_INSTRUMENT_Note[],
 			soundFonts: {} as any,
 			viewIndex: 0,
+			noteAudio: null as unknown as Howl,
 		});
 		const fingerData = reactive({
 			relationshipIndex: 0,
@@ -73,27 +74,27 @@ export default defineComponent({
 			getSounFonts();
 		});
 
-		const noteClick = (item: IFIGNER_INSTRUMENT_Note, type: "start" | "stop") => {
-			// console.log("🚀 ~ item:", item);
-			const noteAudio = data.soundFonts[item.realKey];
-			if (type === "start") {
-				if (data.realKey) {
-					data.soundFonts[data.realKey].stop();
-				}
-				data.realKey = item.realKey;
-				if (noteAudio) {
-					noteAudio.play();
-				}
-			} else {
-				data.realKey = 0;
-				if (noteAudio) {
-					noteAudio.stop();
+		const noteClick = (item: IFIGNER_INSTRUMENT_Note) => {
+			if (data.noteAudio) {
+				data.noteAudio.stop();
+				if (data.realKey === item.realKey) {
+					data.realKey = 0;
+					data.noteAudio = null as unknown as Howl;
+					return;
 				}
 			}
+			data.realKey = item.realKey;
+			data.noteAudio = data.soundFonts[item.realKey];
+			data.noteAudio.play();
 		};
 
 		/** 返回 */
 		const handleBack = () => {
+			if (data.noteAudio) {
+				data.noteAudio.stop();
+				data.realKey = 0;
+				data.noteAudio = null as unknown as Howl;
+			}
 			if (props.isComponent) {
 				console.log("关闭");
 				emit("close");
@@ -181,11 +182,7 @@ export default defineComponent({
 										<div
 											draggable={false}
 											class={styles.note}
-											onKeydown={() => noteClick(note, "start")}
-											onKeyup={() => noteClick(note, "start")}
-											onMouseleave={() => noteClick(note, "stop")}
-											onTouchstart={() => noteClick(note, "start")}
-											onTouchend={() => noteClick(note, "stop")}
+											onClick={() => noteClick(note)}
 										>
 											{data.realKey === note.realKey ? (
 												<img draggable={false} src={icons.icon_btn_ylow} />