管乐团课件播放事件

src/page-orchestra/detail/index.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from "vant";
 import { computed, defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition, watch, watchEffect } from "vue";
 import { formateTimes } from "../../helpers/formateMusic";
 import Metronome, { metronomeData } from "../../helpers/metronome";
-import state, { isRhythmicExercises, musicscoresettingKey } from "../../state";
+import state, { IAudioState, isRhythmicExercises, musicscoresettingKey } from "../../state";
 import { storeData } from "../../store";
 import { setGlobalData } from "../../utils";
 import AudioList from "../../view/audio-list";
@@ -201,11 +201,23 @@ export default defineComponent({
 			};
 		});
 
+		/**播放状态改变时,向父页面发送事件 */
+		const sendParentMessage = (playState: IAudioState) => {
+			window.parent.postMessage(
+				{
+					api: "headerTogge",
+					playState: playState,
+				},
+				"*"
+			);
+		};
+
 		// 监听播放状态
 		watch(
 			() => state.playState,
 			() => {
 				detailData.headerHide = state.playState === "play" ? true : false;
+				sendParentMessage(state.playState)
 			}
 		);
 		// 监听指法显示
@@ -229,7 +241,7 @@ export default defineComponent({
 		const guideShow = !localStorage.getItem("isFirstTip") || !localStorage.getItem("isFirstModel");
 		return () => (
 			<div class={[state.setting.eyeProtection && "eyeProtection"]}>
-				<div style={{opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : ""}} class={styles.bgContainer}></div>
+				<div style={{ opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "" }} class={styles.bgContainer}></div>
 				<div
 					class={["van-safe-area-bottom", styles.detail]}
 					style={{ paddingLeft: detailData.paddingLeft }}
@@ -252,7 +264,9 @@ export default defineComponent({
 						style={{ ...fingerConfig.value.container, height: detailData.headerHide ? "100vh" : "" }}
 						class={[styles.container, !state.setting.displayCursor && "hideCursor"]}
 					>
-						<div style={{display: detailData.headerHide ? 'none' : ''}} class={styles.musicName}>{state.examSongName}</div>
+						<div style={{ display: detailData.headerHide ? "none" : "" }} class={styles.musicName}>
+							{state.examSongName}
+						</div>
 						{/* 曲谱渲染 */}
 						{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
 						{/* 播放 */}

src/state.ts

@@ -16,6 +16,9 @@ export type IMusicRenderType = "staff" | "firstTone" | "fixedTone";
 export const musicscoresettingKey = "musicscoresetting";
 /** 有声音的是那个音源 */
 export type IPlayState = "music" | "background"
+/** 播放状态 */
+export type IAudioState = "play" | "paused"
+
 
 const state = reactive({
 	appName: "" as "GYM" | "COLEXIU",
@@ -71,7 +74,7 @@ const state = reactive({
 	/**是否是特殊乐谱类型, 主要针对管乐迷  */
 	isSpecialBookCategory: false,
 	/** 播放状态 */
-	playState: "paused" as "play" | "paused",
+	playState: "paused" as IAudioState,
 	/** 播放结束状态 */
 	playEnd: false,
 	/** 播放那个: 原音,伴奏 */