增加铺面类型和倍率字段

src/views/creation/index-share.tsx

@@ -94,7 +94,9 @@ export default defineComponent({
     const staffState = reactive({
       staffSrc: "",
       isShow: false,
-      height:"initial"
+      height:"initial",
+      speedRate:1,
+      musicRenderType:"staff"
     })
     const staffDom= ref<HTMLIFrameElement>()
     const {playStaff, pauseStaff, updateProgressStaff} = staffMoveInstance()
@@ -334,7 +336,9 @@ export default defineComponent({
           resourceUrl:encodeURIComponent(state.musicDetail?.videoUrl),
           musicSheetName:encodeURIComponent(state.musicDetail?.musicSheetName),
           username:encodeURIComponent(state.musicDetail?.username),
-          musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId)
+          musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId),
+          speedRate:encodeURIComponent(staffState.speedRate),
+          musicRenderType:encodeURIComponent(staffState.musicRenderType),
         }
       })
     }
@@ -371,6 +375,12 @@ export default defineComponent({
           return;
         } else {
           state.musicDetail = res.data;
+          try{
+            const jsonConfig = JSON.parse(res.data.jsonConfig)
+            jsonConfig.speedRate && (staffState.speedRate = jsonConfig.speedRate)
+            jsonConfig.musicRenderType && (staffState.musicRenderType = jsonConfig.musicRenderType)
+          }catch{
+          }
           // 五线谱
           initStaff()
           getList();
@@ -384,7 +394,7 @@ export default defineComponent({
           nextTick(() => {
             initMediaPlay();
           });
-}
+        }
       } catch (err:any) {
         // 没有的时候显示缺省页
         state.message = err;
@@ -417,8 +427,8 @@ export default defineComponent({
     });
     // 初始化五线谱
     function initStaff(){
-      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=staff`;
-      //const src = `http://192.168.3.68:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=staff`;
+      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}`;
+      //const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -440,7 +450,7 @@ export default defineComponent({
             {
               api: 'api_playProgress',
               content: {
-                currentTime: state._plrl.currentTime
+                currentTime: state._plrl.currentTime * staffState.speedRate
               }
             },
             "*"
@@ -473,14 +483,14 @@ export default defineComponent({
           "*"
         )
       }
-      const updateProgressStaff = (currentTime: string) => {
+      const updateProgressStaff = (currentTime: number) => {
         // 没渲染不执行
         if(!staffState.isShow) return
         staffDom.value?.contentWindow?.postMessage(
           {
             api: 'api_updateProgress',
             content: {
-              currentTime: state._plrl.currentTime
+              currentTime: currentTime * staffState.speedRate
             }
           },
           "*"

src/views/creation/index.tsx

@@ -93,7 +93,9 @@ export default defineComponent({
     const staffState = reactive({
       staffSrc: "",
       isShow: false,
-      height:"initial"
+      height:"initial",
+      speedRate:1,
+      musicRenderType:"staff"
     })
     const staffDom= ref<HTMLIFrameElement>()
     const {playStaff, pauseStaff, updateProgressStaff} = staffMoveInstance()
@@ -347,14 +349,16 @@ export default defineComponent({
           resourceUrl:encodeURIComponent(state.musicDetail?.videoUrl),
           musicSheetName:encodeURIComponent(state.musicDetail?.musicSheetName),
           username:encodeURIComponent(state.musicDetail?.username),
-          musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId)
+          musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId),
+          speedRate:encodeURIComponent(staffState.speedRate),
+          musicRenderType:encodeURIComponent(staffState.musicRenderType),
         }
       })
     }
     // 初始化五线谱
     function initStaff(){
-      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=staff`;
-      //const src = `http://192.168.3.68:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=staff`;
+      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}`;
+      //const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -376,7 +380,7 @@ export default defineComponent({
             {
               api: 'api_playProgress',
               content: {
-                currentTime: state._plrl.currentTime
+                currentTime: state._plrl.currentTime * staffState.speedRate
               }
             },
             "*"
@@ -409,14 +413,14 @@ export default defineComponent({
           "*"
         )
 			}
-      const updateProgressStaff = (currentTime: string) => {
+      const updateProgressStaff = (currentTime: number) => {
         // 没渲染不执行
         if(!staffState.isShow) return
         staffDom.value?.contentWindow?.postMessage(
           {
             api: 'api_updateProgress',
             content: {
-              currentTime: state._plrl.currentTime
+              currentTime: currentTime * staffState.speedRate
             }
           },
           "*"
@@ -451,6 +455,12 @@ export default defineComponent({
           return;
         }
         state.musicDetail = res.data || {};
+        try{
+          const jsonConfig = JSON.parse(res.data.jsonConfig)
+          jsonConfig.speedRate && (staffState.speedRate = jsonConfig.speedRate)
+          jsonConfig.musicRenderType && (staffState.musicRenderType = jsonConfig.musicRenderType)
+        }catch{
+        }
         // 五线谱
         initStaff()
         getStarList();

src/views/creation/playCreation/index.tsx

@@ -41,7 +41,9 @@ export default defineComponent({
     const staffState = reactive({
       staffSrc: "",
       isShow: false,
-      height:"initial"
+      height:"initial",
+      speedRate:Number(decodeURIComponent(route.query.speedRate as string || "1")),
+      musicRenderType:decodeURIComponent(route.query.musicRenderType as string || "staff")
     })
     const staffDom= ref<HTMLIFrameElement>()
     const {playStaff, pauseStaff, updateProgressStaff} = staffMoveInstance()
@@ -289,8 +291,8 @@ export default defineComponent({
     });
     // 初始化五线谱
     function initStaff(){
-      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=staff`;
-      //const src = `http://192.168.3.68:3000/instrument.html#/simple-detail?id=${musicSheetId}&musicRenderType=staff`;
+      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}`;
+      //const src = `https://dev.kt.colexiu.com/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -312,7 +314,7 @@ export default defineComponent({
             {
               api: 'api_playProgress',
               content: {
-                currentTime: _plrl.currentTime
+                currentTime: _plrl.currentTime * staffState.speedRate
               }
             },
             "*"
@@ -345,14 +347,14 @@ export default defineComponent({
           "*"
         )
       }
-      const updateProgressStaff = (currentTime: string) => {
+      const updateProgressStaff = (currentTime: number) => {
         // 没渲染不执行
         if(!staffState.isShow) return
         staffDom.value?.contentWindow?.postMessage(
           {
             api: 'api_updateProgress',
             content: {
-              currentTime
+              currentTime: currentTime * staffState.speedRate
             }
           },
           "*"