music-score/src/state.ts

import { showToast } from "vant";
import { reactive } from "vue";
import { OpenSheetMusicDisplay } from "../osmd-extended/src";
import { metronomeData } from "./helpers/metronome";
import { GradualNote, GradualTimes, GradualVersion } from "./type";
import { handleEndBegin, handleStartEvaluat, sendEvaluatingOffsetTime } from "./view/evaluating";
import { IFingering } from "src/view/fingering/fingering-config";
import { handleStartTick } from "./view/tick";
import { audioListStart, getAudioCurrentTime, getAudioDuration, setAudioCurrentTime, setAudioPlaybackRate } from "./view/audio-list";

/** 入门 | 进阶 | 大师 */
export type IDifficulty = "BEGINNER" | "ADVANCED" | "PERFORMER";

const state = reactive({
	appName: "" as "GYM" | "COLEXIU",
	/**曲谱是否渲染完成 */
	musicRendered: false,
	/** 当前曲谱数据ID, 和曲谱ID不一致 */
	detailId: "",
	/** 曲谱资源URL */
	xmlUrl: "",
	/** 声部ID */
	subjectId: 0 as number,
	/** 分类ID */
	categoriesId: 0,
	/** 分类名称 */
	categoriesName: "",
	/** 是否支持评测 */
	enableEvaluation: true,
	/** 曲谱ID */
	examSongId: "",
	/** 曲谱名称 */
	examSongName: "",
	/** 扩展字段 */
	extConfigJson: {} as any,
	/** 是否开启节拍器 */
	isOpenMetronome: false,
	/** 是否显示指法 */
	isShowFingering: false,
	/** 原音 */
	music: "",
	/** 伴奏 */
	accompany: "",
	/** midiURL */
	midiUrl: "",
	/** 父分ID */
	parentCategoriesId: 0,
	/** 资源类型: mp3 | midi */
	playMode: "MP3",
	/** 设置的速度 */
	speed: 0,
	/** 曲谱音频正常的速度 */
	originSpeed: 0,
	/** 分轨名称 */
	track: "",
	/** 当前显示声部索引 */
	partIndex: 0,
	/** 是否需要节拍器 */
	needTick: false,
	/** 曲谱实例 */
	osmd: null as unknown as OpenSheetMusicDisplay,
	/**是否是特殊乐谱类型, 主要针对管乐迷  */
	isSpecialBookCategory: false,
	/** 播放状态 */
	playState: "paused" as "play" | "paused",
	/** 播放那个: 原音,伴奏 */
	playSource: "music" as "music" | "background",
	/** 播放进度 */
	playProgress: 0,
	/** 激活的note index */
	activeNoteIndex: 0,
	/** 激活的小节 */
	activeMeasureIndex: 0,
	/** 选段状态 */
	sectionStatus: false,
	/** 选段数据 */
	section: [] as any[],
	/** 选段提示 */
	sectionToast: null as any,
	/** 选段背景 */
	sectionBoundingBoxs: [] as any[],
	/** 开启选段预备 */
	isOpenPrepare: false,
	/** 选段预备 */
	sectionFirst: null as any,
	/** 音符数据 */
	times: [] as any[],
	/** 播放模式 */
	modeType: "practise" as "practise" | "follow" | "evaluating",
	/** 设置 */
	setting: {
		/** 效音提醒 */
		soundEffect: true,
		/** 护眼模式 */
		eyeProtection: false,
		/** 摄像头 */
		camera: false,
		/** 循环播放 */
		repeatAutoPlay: true,
		/** 显示指法 */
		displayFingering: true,
		/** 显示光标 */
		displayCursor: true,
		/** 频率 */
		frequency: 442,
		/** 评测难度 */
		evaluationDifficulty: "ADVANCED" as IDifficulty,
		/** 保存到相册 */
		saveToAlbum: false,
		/** 开启伴奏 */
		enableAccompaniment: false,
		/** 反应时间 */
		reactionTimeMs: 0
	},
	/** 节拍器的时间 */
	fixtime: 0,
	/** 指法信息 */
	fingeringInfo: {} as IFingering,
	/** 滚动容器的ID */
	scrollContainer: "musicAndSelection",
	/** 是否是打击乐 */
	isPercussion: false,
	/** 是否重复节拍器的时间 */
	repeatedBeats: 0,
	/**当前曲谱中所有声部名字 */
	partListNames: [] as string[],
	/** 渐变速度信息 */
	gradual: [] as GradualNote[],
	/** 渐变速度版本 */
	gradualVersion: GradualVersion.BASE as GradualVersion,
	/** 渐变时间信息 */
	gradualTimes: null as GradualTimes,
	/** 单声部多声轨 */
	multitrack: 0,
	/** 缩放 */
	zoom: 0.8,
});
/** 音频加载完成 */
export const onLoadedmetadata = (evt: Event) => {
	// console.log(evt)
};
/** 在渲染前后计算光标应该走到的音符 */
const setStep = () => {
	let startTime = Date.now();
	requestAnimationFrame(() => {
		const endTime = Date.now();
		// 渲染时间大于16.6,就会让页面卡顿, 如果渲染时间大与16.6就下一个渲染帧去计算
		if (endTime - startTime < 16.6) {
			if (state.playState !== "play") {
				return;
			}
			handlePlaying();
		}
		setStep();
	});
};
/** 开始播放 */
export const onPlay = () => {
	setStep();
	if (state.modeType === "evaluating") {
		const currentTime = getAudioCurrentTime();
		sendEvaluatingOffsetTime(currentTime);
	}
};
/** 播放中事件 */
export const onTimeupdate = (evt: Event) => {};
/** 播放完成事件 */
export const onEnded = () => {
	handleStopPlay();
	if (state.modeType === "evaluating") {
		handleEndBegin(true);
	}
	// 重复自动播放如果为开启,自动开始播放, 且是练习模式
	if (state.setting.repeatAutoPlay && state.modeType === "practise") {
		scrollViewNote();
		setTimeout(() => {
			togglePlay("play");
		}, 1000);
	}
};

/**
 * 播放一直触发的事件
 */
const handlePlaying = (_item?: any) => {
	const currentTime = getAudioCurrentTime();
	const duration = getAudioDuration();
	state.playProgress = (currentTime / duration) * 100;
	const item = _item ? _item : getNote(currentTime);

	if (item) {
		// 选段状态下
		if (state.sectionStatus && state.section.length === 2) {
			let startItemIndex = state.section[0].index;
			let startXmlIndex = state.section[0].MeasureNumberXML;
			// 开启预备拍
			if (state.sectionFirst) {
				startItemIndex = state.sectionFirst.i;
				startXmlIndex = state.sectionFirst.MeasureNumberXML;
			}
			if (item.MeasureNumberXML < startXmlIndex || item.MeasureNumberXML > state.section[1].MeasureNumberXML) {
				// console.log('选段播放结束')
				skipNotePlay(startItemIndex);
				return;
			}
		}
		gotoNext(item);
	}

	metronomeData.metro?.sound(currentTime);
};
/** 跳转到指定音符开始播放 */
export const skipNotePlay = (itemIndex: number, isStart = false) => {
	const item = state.times[itemIndex];
	let itemTime = item.time;
	if (isStart) {
		itemTime = 0;
	}
	// console.log("🚀 ~ itemTime:", itemTime);
	if (item) {
		setAudioCurrentTime(itemTime)
		handlePlaying(item);
	}
};

/**
 * 切换曲谱播放状态
 * @param playState 可选: 默认 undefined, 需要切换的状态 play:播放, paused: 暂停
 */
export const togglePlay = async (playState?: "play" | "paused") => {
	state.playState = playState ? playState : state.playState === "paused" ? "play" : "paused";
	if (state.playState === "play" && state.needTick) {
		const tickend = await handleStartTick();
		// console.log("🚀 ~ tickend:", tickend)
		// 节拍器返回false, 取消播放
		if (!tickend) {
			state.playState = "paused";
			return
		};
	}
	if (state.playState == "play") {
		// 如果没有选段结束开始播放,清空选段状态
		if (state.sectionStatus && state.section.length < 2) {
			clearSelection();
		}
	}
	audioListStart(state.playState);
};
/** 结束播放 */
export const handleStopPlay = () => {
	state.playState = "paused";
	audioListStart(state.playState);
	skipNotePlay(0, true);
};

/** 跳转到指定音符 */
export const gotoCustomNote = (index: number) => {
	try {
		state.osmd.cursor.reset();
	} catch (error) {}
	for (let i = 0; i < index; i++) {
		state.osmd.cursor.next();
	}
};
/** 跳转到下一个音符 */
export const gotoNext = (note: any) => {
	const num = note.i;
	// console.log('next', state.activeNoteIndex, num)
	if (state.activeNoteIndex === note.i) return;
	const osmd = state.osmd;
	let prev = state.activeNoteIndex;
	state.activeNoteIndex = num;
	state.activeMeasureIndex = note.MeasureNumberXML;

	if (prev && num - prev === 1) {
		osmd.cursor.next();
	} else if (prev && num - prev > 0) {
		while (num - prev > 0) {
			prev++;
			osmd.cursor.next();
		}
	} else {
		gotoCustomNote(num);
	}

	scrollViewNote();
};
/** 获取指定音符 */
export const getNote = (currentTime: number) => {
	const times = state.times;
	const len = state.times.length;
	/** 播放超过了最后一个音符的时间,直接结束 */
	if (currentTime > times[len - 1].endtime + 1) {
		onEnded();
		return;
	}
	let _item = null as any;
	for (let i = state.activeNoteIndex; i < len; i++) {
		const item = times[i];
		const prevItem = times[i - 1];
		if (currentTime >= item.time) {
			if (!prevItem || item.time != prevItem.time) {
				_item = item;
			}
		} else {
			break;
		}
	}
	// console.log("activeNoteIndex", currentTime, state.activeNoteIndex, _item.i);
	return _item;
};

/** 重播 */
export const handleResetPlay = () => {
	skipNotePlay(0, true);
};
/** 设置速度 */
export const handleSetSpeed = (speed: number) => {
	state.speed = speed;
	const playbackRate = speed / state.originSpeed;
	console.log("🚀 ~ playbackRate:", speed, state.originSpeed);

	// 按照比例设置速度
	setAudioPlaybackRate(playbackRate);
};
/** 清除选段状态 */
export const clearSelection = () => {
	state.sectionStatus = false;
	state.section = [];
	state.sectionToast?.close();
	state.sectionToast = null;
};

/** 开启选段 */
export const handleChangeSection = () => {
	// 如果开启了选段,再次点击取消选段
	if (state.sectionStatus) {
		clearSelection();
		return;
	}
	state.sectionStatus = true;
	// 开启
	if (state.sectionStatus) {
		togglePlay("paused");
	}
	state.sectionToast = showToast({
		message: "请选择开始小节",
		duration: 0,
		position: "top",
		className: "selectionToast",
	});
};

/** 选择选段 */
export const handleSelection = (item: any) => {
	if (!state.sectionStatus || state.section.length > 1) return;
	if (state.section.length !== 2 && item) {
		state.section.push(item);
		if (state.section.length === 2) {
			state.section = state.section.sort((a, b) => a.time - b.time);
			let startItemINdex = state.section[0].index;
			// 开启预备拍
			if (state.isOpenPrepare) {
				const startXmlIndex = state.section[0].MeasureNumberXML;
				state.sectionFirst = state.times.find((n: any) => startXmlIndex - n.MeasureNumberXML === 1);
				startItemINdex = state.sectionFirst ? state.sectionFirst.i : startItemINdex;
			}
			skipNotePlay(startItemINdex);
			state.sectionToast?.close();
			state.sectionToast = null;
		}
	}
	if (state.section.length === 1 && state.sectionToast) {
		state.sectionToast.message = "请选择结束小节";
	}
};
let offsetTop = 0;
/**
 * 窗口内滚动到音符的区域
 * @param isScroll 可选: 强制滚动到顶部, 默认: false
 * @returns void
 */
export const scrollViewNote = () => {
	const cursorElement = document.getElementById("cursorImg-0")!;
	const musicAndSelection = document.getElementById(state.scrollContainer)!;
	if (!cursorElement || !musicAndSelection || offsetTop === cursorElement.offsetTop) return;
	offsetTop = cursorElement.offsetTop;
	if (cursorElement.offsetTop > 50) {
		musicAndSelection.scrollTo({
			top: cursorElement.offsetTop - 25,
			behavior: "smooth",
		});
	} else {
		musicAndSelection.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	}
};

/** 检测是否是节奏练习 */
export const isRhythmicExercises = () => {
	return state.examSongName.indexOf("节奏练习") > -1;
};

/** 重置状态 */
export const handleRessetState = () => {
	if (state.modeType === "evaluating") {
		handleStartEvaluat();
	} else if (state.modeType === "practise") {
		togglePlay("paused");
	}
};
export default state;