浏览代码

向iframe 派发节拍器时值

黄琪勇 1 年之前
父节点
当前提交
0961d0bb31
共有 2 个文件被更改,包括 36 次插入16 次删除
  1. 33 0
      src/page-instrument/view-detail/index.tsx
  2. 3 16
      src/view/transfer-to-img/index.tsx

+ 33 - 0
src/page-instrument/view-detail/index.tsx

@@ -190,6 +190,39 @@ export default defineComponent({
         metronomeData.metro = new Metronome();
         metronomeData.metro.init(state.times);
       } catch (error) {}
+
+      // 需要向外面(iframe)派发计时器数据的时候触发
+      if(query.isbeatTimes){
+        const { isOpenMetronome, isSingOpenMetronome } = state
+        const { xmlMp3BeatFixTime } = metronomeData
+        const singBeatTime: number[][] = []
+        const beatTime = metronomeData.metroMeasure.map(metroMeasure => {
+          const singBeat:number[] = []
+          const beatTimeItem = metroMeasure.map((item: any) => {
+            let singTime = item.time
+            if(!state.isEvxml){
+              if(isSingOpenMetronome && !isOpenMetronome){
+                singTime += xmlMp3BeatFixTime
+              } else if(!isSingOpenMetronome && isOpenMetronome){
+                singTime -= xmlMp3BeatFixTime
+              }
+            }
+            singBeat.push(singTime)
+            return item.time
+          })
+          singBeatTime.push(singBeat)
+          return beatTimeItem
+        })
+        console.log("webApi_beatTimes",{beatTime,singBeatTime})
+        window.parent.postMessage(
+          {
+            api: "webApi_beatTimes",
+            data: JSON.stringify({beatTime,singBeatTime})
+          },
+          "*"
+        );
+      }
+      
       /**
        * 2024.1.25
        * 设置节拍器,跟练需要播放系统节拍器,所以不需要判断needTick状态

+ 3 - 16
src/view/transfer-to-img/index.tsx

@@ -6,8 +6,7 @@ import { getQuery } from "/src/utils/queryString";
 import { closeToast, showLoadingToast } from "vant";
 import { svg2canvas } from "/src/utils/svg2canvas";
 import { moveGracePosition } from "/src/helpers/customMusicScore"
-import { formateTimes } from "../../helpers/formateMusic";
-import Metronome, { metronomeData } from "../../helpers/metronome";
+
 export default defineComponent({
 	name: "transfer-to-img",
 	setup() {
@@ -23,7 +22,6 @@ export default defineComponent({
 					name: "五线谱",
 					type: EnumMusicRenderType.staff,
 					base64: "" as any,
-					beatTime: [] as number[][]
 				},
 				{
 					state: false,
@@ -58,7 +56,7 @@ export default defineComponent({
 		});
 
 		/** 渲染完成 */
-		const handleRendered = async (osmd: any) => {
+		const handleRendered = async () => {
 			if (document.getElementById('scrollContainer')) {
 				moveGracePosition(detailData.isSpecialXml);
 			}
@@ -82,8 +80,7 @@ export default defineComponent({
 				});
 				return;
 			}
-			// 获取节拍器时间并赋值
-			handleBateTIme(osmd)
+
 			closeToast();
 			console.log(detailData.product,123456);
 			window.parent?.postMessage(
@@ -122,16 +119,6 @@ export default defineComponent({
 			});
 		};
 
-		function handleBateTIme (osmd: any){
-			const times = formateTimes(osmd)
-			const metronome = new Metronome()
-			metronome.init(times)
-			detailData.product[0].beatTime = metronomeData.metroMeasure.map(metroMeasure => {
-				return metroMeasure.map((item: any) => {
-					return item.time
-				})
-			})
-		}
 		return () => (
 			<div class={styles.detail}>
 				<div id="scrollContainer" class={[styles.container, "hideCursor"]}>