修改

src/views/creation/index-share.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
 // import WaveSurfer from 'wavesurfer.js';
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
 import styles from './index.module.less';
@@ -26,6 +33,7 @@ import { setLogout } from '@/state';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
 import MWxTip from '@/components/m-wx-tip';
+import { usePageVisibility } from '@vant/use';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -253,15 +261,36 @@ export default defineComponent({
       }
     };
 
+    const pageVisibility = usePageVisibility();
+    watch(pageVisibility, value => {
+      console.log(value);
+      if (value === 'hidden') {
+        if (audioDom) {
+          audioDom.pause();
+          state.paused = audioDom.paused;
+        }
+      }
+    });
     onMounted(async () => {
       __init();
     });
 
+    onUnmounted(() => {
+      if (audioDom) {
+        audioDom.pause();
+        state.paused = audioDom.paused;
+      }
+    });
+
     onBeforeRouteUpdate((to: any) => {
       state.id = to.query.id;
       state.playType = '';
       state.params.page = 1;
-      if (audioDom) audioDom.currentTime = 0;
+      if (audioDom) {
+        audioDom.currentTime = 0;
+        audioDom.pause();
+        state.paused = audioDom.paused;
+      }
       state.list = [];
       __init();
     });

src/views/creation/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onUnmounted, reactive } from 'vue';
+import { defineComponent, onMounted, onUnmounted, reactive, watch } from 'vue';
 // import WaveSurfer from 'wavesurfer.js';
 import styles from './index.module.less';
 import MSticky from '@/components/m-sticky';
@@ -34,6 +34,7 @@ import dayjs from 'dayjs';
 import { nextTick } from 'process';
 import MVideo from '@/components/m-video';
 import ShareModel from './share-model';
+import { usePageVisibility } from '@vant/use';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -224,6 +225,16 @@ export default defineComponent({
       // }
     };
 
+    const pageVisibility = usePageVisibility();
+    watch(pageVisibility, value => {
+      console.log(value);
+      if (value === 'hidden') {
+        if (audioDom) {
+          audioDom.pause();
+          state.paused = audioDom.paused;
+        }
+      }
+    });
     onMounted(async () => {
       try {
         const res = await api_userMusicDetail(state.id);
@@ -257,13 +268,6 @@ export default defineComponent({
             initAudio();
           });
         }
-
-        window.addEventListener('pagehide', () => {
-          console.log(1111);
-          // if (audioDom) {
-          //   audioDom.pause();
-          // }
-        });
       } catch {
         //
       }
@@ -272,6 +276,7 @@ export default defineComponent({
     onUnmounted(() => {
       if (audioDom) {
         audioDom.pause();
+        state.paused = audioDom.paused;
       }
     });
     return () => (