music-score/src/view/follow-practice/index.tsx

import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
import state, { gotoNext, resetPlaybackToStart } from "/src/state";
import { IPostMessage } from "/src/utils/native-message";
import { api_cloudFollowTime, api_cloudToggleFollow } from "/src/helpers/communication";
import { storeData } from "/src/store";
import { audioRecorder } from "./audioRecorder";
import { handleStartTick } from "/src/view/tick";

export const followData = reactive({
	list: [] as any, // 频率列表
	index: 0,
	start: false,
	rendered: false,
	/** 麦克风权限 */
	earphone: false,
});

/** 点击跟练模式 */
export const toggleFollow = (notCancel = true) => {
	state.modeType = state.modeType === "follow" ? "practise" : "follow";
	// 取消跟练
	if (!notCancel) {
		followData.start = false;
		openToggleRecord(false);
	}
};

const noteFrequency = ref(0);
const audioFrequency = ref(0);
const followTime = ref(0);
// 切换录音
const openToggleRecord = async (open: boolean = true) => {
	api_cloudToggleFollow(open ? "start" : "end");
	// 记录跟练时长
	if (open) {
		followTime.value = Date.now();
	} else {
		const playTime = Date.now() - followTime.value;
		if (followTime.value !== 0 && playTime > 0) {
			followTime.value = 0;
		}
	}

	if (!storeData.isApp) {
		const openState = await audioRecorder?.toggleRecord(open);
		// 开启录音失败
		if (!openState && followData.start) {
			followData.earphone = true;
			followData.start = false;
		}
	}
};

// 清除音符状态
const onClear = () => {
	state.times.forEach((item: any) => {
		const note: HTMLElement = document.querySelector(`div[data-vf=vf${item.id}]`)!;
		if (note) {
			note.classList.remove("follow-up", "follow-down", "follow-error", "follow-success");
		}
		const _note: HTMLElement = document.getElementById(`vf-${item.id}`)!;
		if (_note) {
			_note.classList.remove("follow-up", "follow-down");
		}
	});
};

/** 开始跟练 */
export const handleFollowStart = async () => {
	// 跟练模式开始前，增加播放系统节拍器
	const tickend = await handleStartTick();
	// console.log("🚀 ~ tickend:", tickend)
	// 节拍器返回false, 取消播放
	if (!tickend) {
		return false;
	}
	onClear();
	followData.start = true;
	followData.index = 0;
	followData.list = [];
	resetPlaybackToStart();
	openToggleRecord(true);
	getNoteIndex();
};
/** 结束跟练 */
export const handleFollowEnd = () => {
	followData.start = false;
	openToggleRecord(false);
	followData.index = 0;
	console.log("结束");
};

// 下一个
const next = () => {
	gotoNext(state.times[followData.index]);
};

// 获取当前音符
const getNoteIndex = (): any => {
	const item = state.times[followData.index];
	if (item.frequency <= 0) {
		followData.index = followData.index + 1;
		next();
		return getNoteIndex();
	}
	noteFrequency.value = item.frequency;
	// state.fixedKey = item.realKey;
	return {
		id: item.id,
		min: item.frequency - (item.frequency - item.prevFrequency) * 0.5,
		max: item.frequency + (item.nextFrequency - item.frequency) * 0.5,
		duration: item.duration,
		baseFrequency: item.frequency,
	};
};
let checking = false;
/** 录音回调 */
const onFollowTime = (evt?: IPostMessage) => {
	const frequency: number = evt?.content?.frequency;
	// 没有开始, 不处理
	if (!followData.start) return;
	// console.log('频率', frequency)
	if (frequency > 0) {
		audioFrequency.value = frequency;
		// data.list.push(frequency)
		checked();
	}
};

let startTime = 0;
const checked = () => {
	if (checking) return;
	checking = true;
	const item = getNoteIndex();
	// 降噪处理, 频率低于 当前音的50% 时, 不处理
	if (audioFrequency.value < item.baseFrequency * 0.5) {
		checking = false;
		return;
	}
	if (audioFrequency.value >= item.min && audioFrequency.value <= item.max) {
		if (startTime === 0) {
			startTime = Date.now();
		} else {
			const playTime = (Date.now() - startTime) / 1000;
			// console.log('时长', playTime, item.duration / 2)
			if (playTime >= item.duration * 0.6) {
				startTime = 0;
				followData.index = followData.index + 1;
				setColor(item, "", true);
				next();
				checking = false;
				return;
			}
		}
		// console.log("频率对了", item.min, audioFrequency.value, item.max, item.duration);
	}
	// console.log("频率不对", item.min, audioFrequency.value, item.max, item.baseFrequency);
	setColor(item, audioFrequency.value > item.baseFrequency ? "follow-up" : "follow-down");
	checking = false;
};
const setColor = (item: any, state: "follow-up" | "follow-down" | "", isRight = false) => {
	const note: HTMLElement = document.querySelector(`div[data-vf=vf${item.id}]`)!;
	if (note) {
		note.classList.remove("follow-up", "follow-down", "follow-error", "follow-success");
		if (isRight) {
			note.classList.add("follow-success");
		} else {
			note.classList.add("follow-error", state);
		}
	}
	const _note: HTMLElement = document.getElementById(`vf-${item.id}`)!;
	if (_note) {
		_note.classList.remove("follow-up", "follow-down");
		state && _note.classList.add(state);
	}
};

export default defineComponent({
	name: "follow",
	setup() {
		onMounted(async () => {
			/** 如果是PC端 */
			if (!storeData.isApp) {
				const canRecorder = await audioRecorder.checkSupport();
				if (canRecorder) {
					audioRecorder.init();
					audioRecorder.progress = (frequency: number) => {
						onFollowTime({ api: "", content: { frequency } });
					};
				} else {
					followData.earphone = true;
				}
			} else {
				api_cloudFollowTime(onFollowTime);
			}
			console.log("进入跟练模式");
		});
		onUnmounted(() => {
			api_cloudFollowTime(onFollowTime, false);
			resetPlaybackToStart();
			onClear();
			openToggleRecord(false);
			console.log("退出跟练模式");
		});
		return () => <div></div>;
	},
});