横竖屏记录播放状态

src/views/creation/index-share.tsx

@@ -4,7 +4,8 @@ import {
   onUnmounted,
   reactive,
   ref,
-  watch
+  watch,
+  nextTick
 } from 'vue';
 // import WaveSurfer from 'wavesurfer.js';
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
@@ -24,7 +25,7 @@ import videoLabel from './share-model/images/videoLabel.png';
 import musicBg from './share-model/images/music-bg.png';
 import playImg from './images/play.png';
 import { browser, getGradeCh, getSecondRPM, vaildMusicScoreUrl } from '@/helpers/utils';
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+import { onBeforeRouteUpdate, useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import {
   api_openUserMusicDetail,
   api_openUserMusicPage,
@@ -32,7 +33,6 @@ import {
   api_verification
 } from './api';
 import MEmpty from '@/components/m-empty';
-import { nextTick } from 'process';
 import MVideo from '@/components/m-video';
 import LoginModel from './login-model';
 import { removeAuth } from '../student-register/layout/utils';
@@ -52,6 +52,7 @@ import audioBga1 from "./images/leftCloud.json";
 import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import audioVisualDraw from "./audioVisualDraw"
+import playProgressData from "./playCreation/playProgress"
 
 export default defineComponent({
   name: 'creation-detail',
@@ -163,6 +164,8 @@ export default defineComponent({
     };
 
     const onDetail = (item: any) => {
+      playProgressData.playProgress = 0
+      playProgressData.playState = false
       router.push({
         path: '/shareCreation',
         query: {
@@ -181,6 +184,8 @@ export default defineComponent({
       // 在微信中运行的时候，微信没有开放自动加载资源的权限，所以要等播放之后才显示播放控制器
       player.on('loadedmetadata', () => {
         plyrState.loaded = true
+        player.currentTime = playProgressData.playProgress
+        if(playProgressData.playState) handlerClickPlay()
       });
       player.on("timeupdate", ()=>{
         plyrState.currentTime = player.currentTime
@@ -243,6 +248,8 @@ export default defineComponent({
     }
     function handlerLandscapeScreen(event:any){
       event.stopPropagation()
+      playProgressData.playState = !!state._plrl?.playing
+      playProgressData.playProgress = state._plrl?.currentTime || 0
       router.push({
         path:"/playCreation",
         query:{
@@ -441,6 +448,13 @@ export default defineComponent({
       staffState.height = "initial"
       __init();
     });
+    onBeforeRouteLeave((to, from, next)=>{
+      if(to.path !== "/playCreation"){
+        playProgressData.playProgress = 0
+        playProgressData.playState = false
+      }
+      next()
+    })
     return () => (
       <div
         style={

src/views/creation/index.tsx

@@ -38,7 +38,7 @@ import iconPlay from './images/icon-play.png';
 import iconPause from './images/icon-pause.png';
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message';
 import { browser, getGradeCh, getSecondRPM, vaildMusicScoreUrl } from '@/helpers/utils';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import {
   api_userMusicDetail,
   api_userMusicRemove,
@@ -56,6 +56,7 @@ import audioBga from "./images/audioBga.json";
 import audioBga1 from "./images/leftCloud.json";
 import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
+import playProgressData from "./playCreation/playProgress"
 
 export default defineComponent({
   name: 'creation-detail',
@@ -210,6 +211,10 @@ export default defineComponent({
           pauseVisualDraw()
         });
       }
+      player.on('loadedmetadata', () => {
+        player.currentTime = playProgressData.playProgress
+        if(playProgressData.playState) handlerClickPlay()
+      });
       player.on("timeupdate", ()=>{
         plyrState.currentTime = player.currentTime
       })
@@ -352,6 +357,8 @@ export default defineComponent({
     }
     function handlerLandscapeScreen(event:any){
       event.stopPropagation()
+      playProgressData.playState = !!state._plrl?.playing
+      playProgressData.playProgress = state._plrl?.currentTime || 0
       router.push({
         path:"/playCreation",
         query:{
@@ -494,6 +501,13 @@ export default defineComponent({
       setStatusBarTextColor(false)
       cleanScrollEvent()
     });
+    onBeforeRouteLeave((to, from, next)=>{
+      if(to.path !== "/playCreation"){
+        playProgressData.playProgress = 0
+        playProgressData.playState = false
+      }
+      next()
+    })
     return () => (
       <div
         style={

src/views/creation/playCreation/index.tsx

@@ -14,6 +14,7 @@ import {
   postMessage
 } from '@/helpers/native-message';
 import { usePageVisibility } from '@vant/use';
+import playProgressData from "./playProgress"
 
 export default defineComponent({
   name: 'playCreation',
@@ -62,6 +63,8 @@ export default defineComponent({
       // 在微信中运行的时候，微信没有开放自动加载资源的权限，所以要等播放之后才显示播放控制器
       _plrl.on('loadedmetadata', () => {
         loaded.value = true
+        _plrl.currentTime = playProgressData.playProgress
+        if(playProgressData.playState) handlerClickPlay()
       });
       _plrl.on('play', () => {
         playIngShow.value = false
@@ -237,10 +240,12 @@ export default defineComponent({
     }
     function handlerBack(event:MouseEvent){
       event.stopPropagation()
+      playProgressData.playState = !!_plrl?.playing
+      playProgressData.playProgress = _plrl?.currentTime || 0
       router.back()
     }
     //点击改变播放状态
-    function handlerClickPlay(event:MouseEvent){
+    function handlerClickPlay(event?:MouseEvent){
       //由于ios低版本必须在用户操作之后才能初始化 createMediaElementSource 所以必须在用户操作之后初始化
       if(!isInitAudioVisualDraw && playType === "Audio"){
         isInitAudioVisualDraw = true
@@ -263,7 +268,7 @@ export default defineComponent({
       }
       // 原生 播放暂停按钮 点击的时候 不触发
       // @ts-ignore
-      if(event.target?.matches('button.plyr__control')){
+      if(event?.target?.matches('button.plyr__control')){
         return
       }
       if (_plrl.playing) {

src/views/creation/playCreation/playProgress.ts

@@ -0,0 +1,6 @@
+
+const playProgressData = {
+  playState: false,
+  playProgress: 0
+}
+export default playProgressData