music-score/src/page-instrument/simple-detail/index.tsx

import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
import state, { getMusicDetail, handleSetSpeed, addNoteBBox, getNote, gotoNext } from "/src/state";
import MusicScore from "../../view/music-score";
import styles from "./index.module.less";
import { getQuery } from "/src/utils/queryString";
import { closeToast, showLoadingToast } from "vant";
import store from "store";
import { formateTimes } from "../../helpers/formateMusic";
import { setCustomGradual, setCustomNoteRealValue } from "/src/helpers/customMusicScore"
import { initSmoothAnimation, smoothAnimationState, destroySmoothAnimation, moveSmoothAnimationByPlayTime } from "../view-detail/smoothAnimation";
import { api_playProgress } from "/src/helpers/communication";

export default defineComponent({
	name: "simple-detail",
	setup() {
		const query: any = getQuery();

		const detailData = reactive({
			isLoading: true,
			currentTime: 0, // 当前播放的时间
			totalTime: 60000, // 音视频总时长
		});

		const communicateCb = (res: any) => {
			// 播放进度
			if (res?.data?.api === "playProgress") {
				if (res?.data.data) {
					state.playState = 'play';
					console.log(res.data)
				}
			}
		};
		// 监听评测曲谱音频播放进度，返回
		const progress = (res: any) => {
			detailData.currentTime = res?.currentTime || res?.content?.currentTime;
			detailData.totalTime = res?.totalDuration || res?.content?.totalDuration;
			const time = detailData.currentTime / 1000;
			if (res?.content?.totalDuration > 1000 && detailData.currentTime >= detailData.totalTime) {
				// 播放结束
			}
		};

		onMounted(async () => {
			const id = query.id || '';
			await getMusicDetail(id);
			detailData.isLoading = false;
			state.isSingleLine = true;
			state.isSimplePage = true;
			api_playProgress(progress);
			window.addEventListener("message", communicateCb);
		});

		onUnmounted(() => {
			state.isSimplePage = false;
			window.removeEventListener("message", communicateCb);
		});
		/** 渲染完成 */
		const handleRendered = async (osmd: any) => {
			console.log('渲染完成')
			state.osmd = osmd;
			// 没有设置速度使用读取的速度
			if (state.originSpeed === 0) {
				state.originSpeed = state.speed = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM || 100;
			}
			const saveSpeed = (store.get("speeds") || {})[state.examSongId] || state.speed || (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM;
			// 加载本地缓存的速度
			if (saveSpeed) {
				handleSetSpeed(saveSpeed);
			}
			setCustomGradual();
			setCustomNoteRealValue();
			state.times = formateTimes(osmd);
			console.log("🚀 ~ state.times:", state.times, state.subjectId, state);
			// 音符添加位置信息bbox
			addNoteBBox(state.times);
			// 一行谱创建 动画
			initSmoothAnimation();
			//destroySmoothAnimation();
			smoothAnimationState.isShow.value = false;
			state.playState = 'play';
			setStep();
		};
		/**
		 * 播放一直触发的事件
		 */
		const handlePlaying = () => {
			detailData.currentTime += 0.03;
			const currentTime = detailData.currentTime;
			const duration = detailData.totalTime;
			state.playProgress = (currentTime / duration) * 100;
			// console.log('👀～播放进度',currentTime)
			let item = getNote(currentTime);
			if (item) {
				gotoNext(item);
			}
			// 一行谱，需要滚动小节
			if (state.isSingleLine) {
				moveSmoothAnimationByPlayTime(currentTime)
			}
		
		};
		/** 在渲染前后计算光标应该走到的音符 */
		const setStep = () => {
			// console.log('播放状态',state.playState)
			if (state.playState !== "play") {
				console.log("暂停播放");
				return;
			}
			let startTime = Date.now();
			requestAnimationFrame(() => {
			const endTime = Date.now();
			// 渲染时间大于16.6,就会让页面卡顿, 如果渲染时间大与16.6就下一个渲染帧去计算
			if (endTime - startTime < 16.7) {
				handlePlaying();
				setStep();
			} else {
				setTimeout(() => {
				handlePlaying();
				setStep();
				}, 16.7);
			}
			});
		};

		return () => (
			<div class={styles.detail}>
				<div id="scrollContainer" class={[styles.container, "hideCursor"]}>
					{/* 曲谱渲染 */}
					{!detailData.isLoading && 
					<MusicScore 
						onRendered={handleRendered} 
						musicColor={'#FFFFFF'}
					/>}
				</div>
			</div>
		);
	},
});