切后台，停止播放

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

@@ -16,6 +16,8 @@ import { Button, Icon, Popup, Space } from "vant";
 import GuideIndex from "./guide/guide-index";
 import { getQuery } from "/src/utils/queryString";
 import { browser } from "/src/utils";
+import { usePageVisibility } from "@vant/use";
+import { watch } from "vue";
 
 export default defineComponent({
 	name: "viewFigner",
@@ -124,14 +126,17 @@ export default defineComponent({
 			data.noteAudio = data.soundFonts[item.realKey];
 			data.noteAudio.play();
 		};
-
-		/** 返回 */
-		const handleBack = () => {
+		const handleStop = () => {
 			if (data.noteAudio) {
 				data.noteAudio.stop();
 				data.realKey = 0;
 				data.noteAudio = null as unknown as Howl;
 			}
+		}
+
+		/** 返回 */
+		const handleBack = () => {
+			handleStop();
 			if (props.isComponent) {
 				console.log("关闭");
 				emit("close");
@@ -193,6 +198,17 @@ export default defineComponent({
 				data.transform.startY = 0;
 			});
 		};
+
+		const pageVisible = usePageVisibility();
+		watch(
+			() => pageVisible.value,
+			(val) => {
+				if (val === 'hidden') {
+					console.log("页面隐藏停止播放");
+					handleStop();
+				}
+			}
+		);
 		return () => {
 			const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
 			const rs: number[] = Array.isArray(relationship[1])