music-score/src/helpers/metronome.ts

/**
 * 曲谱节拍器
 * auth: lsq
 * time: 2022.11.14
 */
import { reactive, watch } from "vue";
import { tickUrl as tick, tockUrl as tock } from "/src/constant/audios";
import { browser } from "/src/utils/index";
import state from "/src/state";
import { Howl } from "howler";
import tockAndTick from "/src/constant/tockAndTick.json";
import tickWav from "/src/assets/tick.wav";
import tockWav from "/src/assets/tock.wav";

type IOptions = {
	speed: number;
};
const browserInfo = browser();
let tipsTimer: any = null; // 光标提示定时器

// HTMLAudioElement 音频
const audioData = reactive({
	tick: null as unknown as HTMLAudioElement,
	tock: null as unknown as HTMLAudioElement,
});

let tickTockPlayTime = 0;

export const metronomeData = reactive({
	disable: true,
	initPlayerState: false,
	lineShow: false,
	isClick: false,
	metro: null as unknown as Metronome,
	metroList: [] as number[],
	activeList: [] as number[],
	metroMeasure: [] as any[],
	activeIndex: null as unknown as number,
	activeMetro: {} as any,
	cursorMode: 1 as number, // 光标模式：1:音符指针；2:节拍指针；3:关闭指针
	cursorTips: '' as string, // 光标模式提示文字
	followAudioIndex: 1, // 当前的拍数
	totalNumerator: 2, // 总拍数
});

watch(
	() => metronomeData.cursorMode,
	() => {
		const img: HTMLElement = document.querySelector("#cursorImg-0")!;
		if (img) {
			switch (metronomeData.cursorMode) {
				case 1:
					img.classList.remove("lineHide");
                    img.style.opacity = 'inherit'
					metronomeData.cursorTips = '您已切换到指针跟随音符播放';
                    img.style.opacity = 'inherit'
					break;
				case 2:
					img.classList.add("lineHide");
                    img.style.opacity = 'inherit'
					metronomeData.cursorTips = '您已切换到指针跟随节拍播放';
                    // console.log('光标',img)
					break;
				case 3:
                    img.style.opacity = '0'
					metronomeData.cursorTips = '您已关闭指针显示';
					// console.log('隐藏光标')
					break;
				default:
					break;
			}
			hideCursorTip()
		}
	}
);

// 切换隐藏光标
const toggleLine = () => {
	if (!metronomeData.lineShow) return;
	const img: HTMLElement = document.querySelector("#cursorImg-0")!;
	if (img) {
		if (state.times[state.activeNoteIndex].multipleRestMeasures) {
			img.classList.remove("lineHide");
		} else {
			img.classList.add("lineHide");
		}
	}
};
watch(
	() => metronomeData.lineShow,
	() => {
		const img: HTMLElement = document.querySelector("#cursorImg-0")!;
		if (img) {
			if (metronomeData.lineShow) {
				img.classList.add("lineHide");
			} else {
				img.classList.remove("lineHide");
			}
		}
	}
);

class Metronome {
	playType = "tick";
	source = null as any; // 创建音频源头
	source1 = null as any;
	source2 = null as any;

	constructor(option?: IOptions) {}
	init(times: any[]) {
		this.calculation(times);
		metronomeData.activeList = [];
	}
	initPlayer() {
		// if (!this.source1) {
		// 	this.source1 = this.loadAudio1();
		// }
		// if (!this.source2) {
		// 	this.source2 = this.loadAudio2();
		// }
		// metronomeData.initPlayerState = true;

		Promise.all([this.createAudio(tickWav), this.createAudio(tockWav)]).then(
			([tick, tock]) => {
				if (tick) {
					audioData.tick = tick;
				}
				if (tock) {
					audioData.tock = tock;
				}
				metronomeData.initPlayerState = true;
			}
		);		
	}
	createAudio = (src: string): Promise<HTMLAudioElement | null> => {
		return new Promise((resolve) => {
			// const a = new Audio(src + '?v=' + Date.now());
			const a = new Audio(src);
			a.load();
			a.onloadedmetadata = () => {
				resolve(a);
			};
			a.onerror = () => {
				resolve(null);
			};
		});
	};

	// 播放
	sound = (currentTime: number) => {
		if (!state.sectionStatus){
			currentTime = setCurrentTime(currentTime);
		}
		let index = -1;
		let activeMetro = -1;
		for (let i = 0; i < metronomeData.metroList.length; i++) {
			const item = metronomeData.metroList[i];

			if (currentTime >= item) {
				// console.log(currentTime , item)
				index = i;
				activeMetro = item;
			} else {
				break;
			}
		}
		if (index > -1 && metronomeData.activeIndex !== index) {
			metronomeData.activeIndex = index;
			// console.log("播放", metronomeData.activeIndex);
			metronomeData.activeMetro = this.getStep(activeMetro);
			// console.log("🚀 ~ metronomeData.activeMetro",metronomeData.activeMetro.measureNumberIndex, metronomeData.activeMetro.index)
			tickTockPlayTime = currentTime
			this.playAudio();
			metronomeData.isClick = false;
			return;
		}
		toggleLine()
		metronomeData.isClick = false;
	};
	// 播放
	playAudio = () => {
		if (!metronomeData.initPlayerState || state.playState === 'paused') return;
		const beatVolume = state.setting.beatVolume / 100
		// this.source = metronomeData.activeMetro?.index === 0 ? this.source1 : this.source2;
		// this.source.volume(metronomeData.disable || state.playState === 'paused' ? 0 : beatVolume);
		// Audio 播放音频
		this.source = metronomeData.activeMetro?.index === 0 ? audioData.tick : audioData.tock;
		this.source.volume = metronomeData.disable ? 0 : beatVolume;
		if (this.source.volume <= 0) {
			this.source.muted = true
		} else {
			this.source.muted = false
		}
		// console.log('节拍器播放的时间',tickTockPlayTime)
		this.source.play();
	};

	/**
	 * 跟练模式播放，跟练模式没有曲子音频播放器
	 */
	simulatePlayAudio = () => {
		// console.log(333, metronomeData.followAudioIndex)
		if (!metronomeData.initPlayerState) return;
		const beatVolume = state.setting.beatVolume / 100
		// this.source = metronomeData.followAudioIndex === 1 ? this.source1 : this.source2;
		// Audio 播放音频
		this.source = metronomeData.followAudioIndex === 1 ? audioData.tick : audioData.tock;
		// this.source.volume(metronomeData.disable ? 0 : beatVolume);
		this.source.volume = metronomeData.disable ? 0 : beatVolume
		/**
		 * https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/volume
		 * volume属性在部分ios手机的Safari浏览器不被支持
		 */
		if (this.source.volume <= 0) {
			this.source.muted = true
		} else {
			this.source.muted = false
		}
		console.log('音量',this.source,this.source.volume)
		this.source.play();
		metronomeData.followAudioIndex += 1;
		metronomeData.followAudioIndex = metronomeData.followAudioIndex > metronomeData.totalNumerator ? 1 : metronomeData.followAudioIndex;
	};

	// 切换
	selectPlay() {}

	loadAudio1 = () => {
		return new Howl({
			src: tockAndTick.tick,
			// 如果是ios手机,需要强制使用audio,不然部分系统版本第一次播放没有声音
			// html5: browserInfo.ios,
		});
	};
	loadAudio2 = () => {
		return new Howl({
			src: tockAndTick.tock,
			// html5: browserInfo.ios,
		});
	};
	getStep(time: number) {
		for (let i = 0; i < metronomeData.metroMeasure.length; i++) {
			const list = metronomeData.metroMeasure[i];
			const item = list.find((n: any) => n.time === time);
			if (item) {
				// console.log('index',item)
				return item;
			}
		}
		return {};
	}

	// 计算 所有的拍子的时间
	calculation(times: any[]) {
		// console.log("🚀 ~ times", times);
		// 1.统计有多少小节
		const measures: any[] = [];
		let xmlNumber = -1;
		for (let i = 0; i < times.length; i++) {
			const note = times[i];
			const measureNumberXML = note?.noteElement?.sourceMeasure?.MeasureNumberXML;
			// console.log("🚀 ~ note?.noteElement?.sourceMeasure", note?.noteElement?.sourceMeasure)
			// console.log("🚀 ~ measureNumberXML", measureNumberXML, note)
			// console.log("🚀 ~ measureNumberXML", note)
			const measureListIndex = note?.noteElement?.sourceMeasure?.measureListIndex;
			if (measureNumberXML > -1) {
				if (measureNumberXML != xmlNumber) {
					const m = {
						measureNumberXML: measureNumberXML,
						measureNumberIndex: measureListIndex,
						numerator: note?.noteElement?.sourceMeasure?.ActiveTimeSignature?.numerator || 0,
						start: note.measures[0].time,
						end: note.measures[note.measures.length - 1].endtime,
						time: note.measures[note.measures.length - 1].endtime - note.measures[0].time,
						stave_x: note?.noteElement?.sourceMeasure?.verticalMeasureList?.[0]?.stave?.x || 0,
						end_x: note?.stave?.end_x || 0 || 0,
						stepList: [] as number[],
						svgs: [] as any[],
						isRestFlag: note.isRestFlag,
					};
					// 2.统计小节的拍数
					// 3.统计小节的时长, 开始时间,结束时间
					// console.log(measureNumberXML,note.measures, times.filter((n: any) => n?.noteElement?.sourceMeasure?.measureListIndex == measureListIndex))
					if ([121].includes(state.subjectId)) {
						const _measures = times.filter((n: any) => n?.noteElement?.sourceMeasure?.measureListIndex == measureListIndex);
						note.measures = _measures;
						m.start = note.measures[0].time;
						m.end = note.measures[note.measures.length - 1].endtime;
						m.time = note.measures[note.measures.length - 1].endtime - note.measures[0].time;
						try {
							const tickables = note.noteElement.sourceMeasure.verticalMeasureList.reduce((arr: any[], value: any) => {
								arr.push(...value.vfVoices["1"].tickables);
								return arr;
							}, []);
							const xList: any[] = [];
							m.svgs = tickables
								.map((n: any) => {
									const x = n.getBoundingBox().x;
									if (!xList.includes(x) && n.duration !== "w") {
										xList.push(x);
										n._start_x = x;
										return n;
									}
								})
								.filter(Boolean)
								.sort((a: any, b: any) => a._start_x - b._start_x);
							// console.log(measureNumberXML, m.svgs)
						} catch (error) {
							console.log(error);
						}
						m.stepList = calculateMutilpleMetroStep(note.measures, m);
					} else {
						m.stepList = calculateMetroStep(note.measures, m);
					}
					measures.push(m);
					xmlNumber = measureNumberXML;
				}
			}
		}
		// console.log(measures, measures.length);

		let metroList: number[] = [];
		const metroMeasure: any[] = [];
		// 4.按照拍数将时长平均分配
		try {
			for (let i = 0; i < measures.length; i++) {
				const measure = measures[i];
				const noteStep = measure.time / measure.numerator;
				// console.log("🚀 ~ measure.measureNumberXML",measure.measureNumberXML, noteStep)
				const WIDTH = [121].includes(state.subjectId) ? 95 : 100;
				const widthStep = WIDTH / (measure.numerator + 1);
				metroMeasure[i] = [] as number[];
				// console.log('stepList', [...measure.stepList], measure.measureNumberXML)
				for (let j = 0; j < measure.numerator; j++) {
					const time = noteStep * j + measure.start;
					metroList.push(time);
					let left = "";
					if (measure.stepList[j]) {
						left = measure.stepList[j] + "px";
					} else {
						const preLeft = measure.stepList[j - 1];
						left = !preLeft ? `${widthStep}%` : preLeft.toString().indexOf("%") > -1 ? `${preLeft} + ${widthStep}%` : `${preLeft}px + ${widthStep}%`;
						measure.stepList[j] = left;
					}
					metroMeasure[i].push({
						index: j,
						time,
						// left: (measure.stepList[j] ? measure.stepList[j] + 'px' : (j + 1) * widthStep + '%'),
						left: left?.indexOf("%") > -1 ? `calc(${left})` : left,
						measureNumberXML: measure.measureNumberXML,
						isRestFlag: measure.isRestFlag,
					});
				}
			}
		} catch (error) {
			console.log(error);
		}
		console.log('节拍器',metroList, metroMeasure);
		// 5.得到所有的节拍时间
		metronomeData.metroList = metroList;
		metronomeData.metroMeasure = metroMeasure;
		// console.log(9999,metroList,7777,metroMeasure)
		metronomeData.activeMetro = metroMeasure[0]?.[0] || {};
	}
}

// 计算拍子的时值
function calculateMetroStep(arr: any[], m: any): number[] {
	const measureLength = arr.reduce((total: number, item: any) => {
		total += item._noteLength;
		return total;
	}, 0);
	const clap = measureLength / m.numerator;
	if (arr.length === 1) {
		const wholeNote = arr[0].svgElement;
		if (wholeNote && !wholeNote.isRest()) {
			const measure_bbox = wholeNote?.attrs?.el?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0, right: 0 };
			let bbox = wholeNote?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
			let stepWidth = Math.abs(measure_bbox.right - bbox.x) / m.numerator;
			let stepList: number[] = [];
			for (let i = 0; i < m.numerator; i++) {
				stepList.push(bbox.x - measure_bbox.x + i * stepWidth);
			}
			// console.log("🚀 ~ stepList:", stepList, m.measureNumberXML)
			return stepList;
		}
		try {
			// 开头是休止符
			if (m.measureNumberXML === 1 && wholeNote && wholeNote.isRest()) {
				const measure_bbox = wholeNote?.attrs?.el?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0, right: 0 };
				let bbox = wholeNote?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
				let stepWidth = Math.abs(measure_bbox.right - bbox.x) / m.numerator;
				let stepList: any[] = [];
				// 第一小节是休止符，节拍指针应该等分宽度
				const widthStep = 100 / (m.numerator + 1);
				// for (let i = -1; i < m.numerator - 1; i++) {
				// 	stepList.push(bbox.x - measure_bbox.x + i * stepWidth);
				// }
				// for (let i = 1; i <= m.numerator; i++) {
				// 	stepList.push(widthStep * i + '%');
				// }
				// console.log(wholeNote?.attrs?.el, m.measureNumberXML)
				// console.log("🚀 ~ stepList:", stepList, m.measureNumberXML)
				return stepList;
			}
		} catch (error) {
			console.log("🚀 ~ error:", error);
		}

		return [];
	}
	// console.log("🚀 ~ arr", [...arr],`小节总时值: ${measureLength}`, clap, m.measureNumberXML);
	let totalLength = 0;
	let notes: any[] = [];
	let stepList: number[] = [];
	for (let i = 0; i < arr.length; i++) {
		const item = arr[i];
		item.index = i;
		const noteLength = item._noteLength;
		totalLength += noteLength;
		// 大于一拍
		const exceedStep = Math.floor(totalLength / clap);
		// console.log(`note`, item?.svgElement?.attrs?.el,notes.length,{noteLength, exceedStep,clap}, m.measureNumberXML)
		if (exceedStep >= 1) {
			totalLength -= clap;
			// 一拍
			const measure_bbox = item?.svgElement?.attrs?.el?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0 };
			if (notes.length > 0) {
				let bbox = notes[0]?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
				let x: any = bbox.x - measure_bbox.x;
				if (notes[0]._noteLength / clap >= 1) {
					const nextNote = arr[notes[0].index + 1]?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: measure_bbox.right } || { x: 0 };
					const stepWidth = Math.abs(bbox.x - nextNote.x) / 2;
					x = bbox.x - measure_bbox.x + stepWidth;
					// console.log(`音符超一拍`, notes[0]?.svgElement?.attrs?.el, arr[notes[0].index + 1]?.svgElement?.attrs?.el, bbox.x - nextNote.x, stepWidth, m.measureNumberXML);
				}
				// console.log(`一拍`, notes[0]?.svgElement?.attrs?.el, m.measureNumberXML, notes[0]._noteLength , clap, 'aa')
				stepList.push(x);
			} else {
				let bbox = item?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
				let x: any = bbox.x - measure_bbox.x;
				// console.log(`一拍`, item?.svgElement?.attrs?.el, m.measureNumberXML)
				stepList.push(x);
			}
			notes = [];
			let bbox = item?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
			let x: any = bbox.x - measure_bbox.x;
			let stepWidth = 0;
			if (exceedStep > 1) {
				// 二拍以上
				const nextNote = arr[i + 1]?.svgElement?.attrs?.el?.getBoundingClientRect?.() || { x: measure_bbox.right } || { x: 0 };
				stepWidth = Math.abs(bbox.x - nextNote.x) / exceedStep;
				// console.log("二拍以上 ~ nextNote:",bbox.x , nextNote.x,stepWidth, item?.svgElement?.attrs?.el,arr[i + 1]?.svgElement?.attrs?.el, exceedStep);
			}

			for (let j = 1; j < exceedStep; j++) {
				totalLength -= clap;
				// console.log(`超一拍`,item?.svgElement?.attrs?.el, m.measureNumberXML)
				stepList.push(x + stepWidth * j);
			}
		}

		//有时值就将音符加入
		if (totalLength > Number.EPSILON && totalLength > 0) {
			notes.push(item);
		}
	}
	stepList = stepList.reduce((list: any[], n: number) => {
		if (list.includes(n)) {
			list.push(undefined as any);
		} else {
			list.push(n);
		}
		return list;
	}, []);
	// console.log("stepList", [...stepList], m.measureNumberXML);
	return stepList;
}
// 计算单声部多声轨的拍子的时值
function calculateMutilpleMetroStep(arr: any[], m: any): number[] {
	// console.log("🚀 ~ m:", [...m.svgs])
	const step = m.time / m.numerator;
	const measure_bbox = arr[0]?.svgElement?.attrs?.el?.parentElement?.parentElement?.getBoundingClientRect?.() || { x: 0 };
	if (arr.length === 1) {
		const staveNote = m.svgs[0];
		// 大于一拍
		let bbox = staveNote?.attrs?.el?.getBoundingClientRect?.() || { x: 0 };
		if (staveNote && !staveNote.isRest()) {
			return [bbox.x - measure_bbox.x];
		}
		return [];
	}
	// console.log("🚀 ~ arr", arr, step, m.measureNumberXML);
	let total = 0;
	let notes: any[] = [];
	let stepList: number[] = [];
	for (let i = 0; i < arr.length; i++) {
		const item = arr[i];
		item._index = i;
		const noteTime = item.endtime - item.time;
		total += noteTime;
		let svgEle = m.svgs[i]?.attrs?.el;
		// 大于一拍
		let bbox = svgEle?.getBoundingClientRect?.() || { x: 0 };
		// console.log(m.measureNumberXML, svgEle, i)
		if (noteTime > step) {
			total -= step;
			// console.log('超过一拍了', notes, m.measureNumberXML)
			let x = bbox.x - measure_bbox.x;
			if (notes.length > 0) {
				svgEle = m.svgs[notes[0]._index]?.attrs?.el;
				bbox = svgEle?.getBoundingClientRect?.() || { x: 0 };
				x = bbox.x - measure_bbox.x;
			}
			stepList.push(x);
			notes = [];
		} else {
			notes.push(item);
		}
		// console.log(notes)
		if (Math.abs(total - step) < 0.001) {
			let x = bbox.x - measure_bbox.x;
			if (notes.length > 0) {
				svgEle = m.svgs[notes[0]._index]?.attrs?.el;
				bbox = svgEle?.getBoundingClientRect?.() || { x: 0 };
				x = bbox.x - measure_bbox.x;
			}
			// console.log("一拍",svgEle,notes,m.svgs, m.measureNumberXML);
			stepList.push(x);
			total = 0;
			notes = [];
		}
	}
	stepList = stepList.reduce((list: any[], n: number) => {
		if (list.includes(n)) {
			list.push(undefined as any);
		} else {
			list.push(n);
		}
		return list;
	}, []); //Array.from(new Set(stepList))
	// console.log('stepList', stepList, m.measureNumberXML)
	return stepList;
}

// 延迟兼容处理
function setCurrentTime(time: number) {
	if (browserInfo.huawei || browserInfo.xiaomi) {
		time += 0.125;
	} else if (browserInfo.android) {
		time += 0.11;
	} else if (browserInfo.ios) {
		time += 0.01;
	}
	return time;
}

// 自动隐藏光标提示
function hideCursorTip() {
	if (!tipsTimer) {
		tipsTimer = setTimeout(() => {
			metronomeData.cursorTips = ''
			clearTimeout(tipsTimer)
			tipsTimer = null
		}, 2000);
	} else {
		clearTimeout(tipsTimer)
		tipsTimer = setTimeout(() => {
			metronomeData.cursorTips = ''
			clearTimeout(tipsTimer)
			tipsTimer = null
		}, 2000);
	}
}

export default Metronome;