选段

src/helpers/metronome.ts

@@ -136,6 +136,7 @@ class Metronome {
 		// 4.按照拍数将时长平均分配
 		try {
 			for (let i = 0; i < measures.length; i++) {
+				const metro: any[] = [];
 				const measure = measures[i];
 				const calp = 1 / measure.numerator;
 				// console.log("🚀 ~ measure.numerator:", measure.numerator)
@@ -149,12 +150,14 @@ class Metronome {
 				for (let j = 0; j < measure.numerator; j++) {
 					const time = stepTime * j + startTime;
 					metroList.push(time);
+					metro.push(time)
 				}
+				// metroMeasure[measure.measureNumberXML] = metro
 			}
 		} catch (error) {
 			console.log(error);
 		}
-		// console.log(metroList, metroList.length);
+		// console.log(metroList, metroMeasure);
 		// 5.得到所有的节拍时间
 		metronomeData.metroList = metroList;
 		metronomeData.metroMeasure = metroMeasure;

src/pc/home/index.tsx

@@ -223,7 +223,7 @@ export default defineComponent({
 				abcElem,
 				data.music.substring(data.active.startChar, data.active.endChar)
 			);
-			if (data.active?.el_type === "note") {
+			if (data.active?.el_type === "note" && !popup.selectMearesShow) {
 				const totalTime = (abcData.synthControl as any).visualObj.getTotalTime();
 				if (totalTime) {
 					const progress = (data.active as any).currentTrackMilliseconds / 1000 / totalTime;
@@ -265,7 +265,7 @@ export default defineComponent({
 			synthControl: null as unknown as SynthObjectController,
 			synthOptions: {
 				program: 0,
-				// soundFontUrl: "/soundFonts/",
+				// soundFontUrl: "https://oss.dayaedu.com/musicSheet/",
 				// soundFontUrl: "https://paulrosen.github.io/midi-js-soundfonts/FluidR3_GM/", // 默认 FluidR3_GM
 				// soundFontUrl: "https://paulrosen.github.io/midi-js-soundfonts/MusyngKite/", // Musyng Kite
 			},
@@ -319,7 +319,21 @@ export default defineComponent({
 			},
 			onBeat: function (beatNumber: any, totalBeats: any, totalTime: any) {
 				if (!data.playState) return;
-				// console.log("🚀 ~ beatNumber:", (beatNumber / totalBeats) * totalTime);
+				if (popup.selectMearesShow && data.selectMeasures.startNote && data.selectMeasures.endNote) {
+					const end =
+						totalBeats *
+						(data.selectMeasures.endNote.milliseconds /
+							(abcData.visualObj.getTotalTime() * 1000)) - 0.1;
+					// console.log(beatNumber, start, end, progress);
+					if (beatNumber >= end) {
+						const progress =
+							data.selectMeasures.startNote.milliseconds /
+							(abcData.visualObj.getTotalTime() * 1000);
+						(abcData.synthControl as any).seek(progress);
+						return;
+					}
+				}
+				// console.log("🚀 ~ beatNumber:", beatNumber, totalBeats, totalTime);
 				const time = (beatNumber / totalBeats) * totalTime;
 				metronomeData.metro.sound(time);
 			},
@@ -328,26 +342,6 @@ export default defineComponent({
 				if (!data.playState) return;
 				if (ev.measureStart && ev.left === null) return; // this was the second part of a tie across a measure line. Just ignore it.
 
-				if (popup.selectMearesShow && data.selectMeasures.startNote && data.selectMeasures.endNote) {
-					const startTime = data.selectMeasures.startNote?.currentTrackMilliseconds || 0;
-					// const timeNote = data.times.find(
-					// 	(n) => n.startChar === data.selectMeasures.startNote.startChar
-					// );
-					const endNote: any = data.selectMeasures.endNote ? data.selectMeasures.endNote : null;
-					if (
-						ev.milliseconds < startTime ||
-						(endNote && ev.milliseconds > endNote.currentTrackMilliseconds)
-					) {
-						const totalTime = (abcData.synthControl as any).visualObj.getTotalTime();
-						if (totalTime) {
-							const progress = startTime / 1000 / totalTime;
-							nextTick(() => {
-								(abcData.synthControl as any).seek(progress);
-							});
-							return;
-						}
-					}
-				}
 				data.activePlayNote = { ...ev };
 				var cursor = document.querySelector("#paper svg .ABCJS-cursor");
 				if (cursor) {
@@ -404,7 +398,7 @@ export default defineComponent({
 				});
 		};
 
-		const togglePlay = (type: "play" | "pause" | "reset") => {
+		const togglePlay = async (type: "play" | "pause" | "reset") => {
 			if (type === "play") {
 				if (popup.selectMearesShow) {
 					if (
@@ -423,6 +417,19 @@ export default defineComponent({
 						});
 						return;
 					}
+					if (!(abcData.synthControl as any).isLoaded) {
+						(abcData.synthControl as any).runWhenReady(() => {
+							const progress =
+								data.selectMeasures.startNote.milliseconds /
+								(abcData.visualObj.getTotalTime() * 1000);
+							(abcData.synthControl as any).seek(progress);
+						});
+					} else {
+						const progress =
+							data.selectMeasures.startNote.milliseconds /
+							(abcData.visualObj.getTotalTime() * 1000);
+						(abcData.synthControl as any).seek(progress);
+					}
 				}
 				abcData.synthControl.play();
 				data.playState = true;
@@ -503,7 +510,7 @@ export default defineComponent({
 			saveTimer && clearTimeout(saveTimer);
 			saveTimer = setTimeout(() => {
 				handleSaveMusic(false);
-			}, 5000);
+			}, 15000);
 		};
 
 		/**
@@ -1299,7 +1306,7 @@ export default defineComponent({
 					try {
 						delete qs_data.config;
 					} catch (error) {
-						console.log("🚀 ~ error:", error)
+						console.log("🚀 ~ error:", error);
 					}
 					location.hash = hash[0] + "?" + qs.stringify(qs_data);
 				}
@@ -1556,8 +1563,9 @@ export default defineComponent({
 		const handleSetSelectMeares = (index: number | null, type: "start" | "end") => {
 			console.log("🚀 ~ index:", index);
 			if (type === "start") {
-				const note = index ? useIndexGetNote(`${index - 1}.0`) : null;
-				// console.log("🚀 ~ note:", note);
+				let note = index ? useIndexGetNote(`${index - 1}.0`) : null;
+				note = data.times.find((_note: any) => _note.startChar === note.startChar);
+				// console.log("🚀 ~ note:", note, data.times);
 				data.selectMeasures.start = index ? index - 1 : 0;
 				data.selectMeasures.startNote = note;
 				if (
@@ -1569,9 +1577,10 @@ export default defineComponent({
 					data.selectMeasures.endNote = null;
 				}
 			} else {
-				const note = index
-					? useIndexGetNote(`${index - 1}.${abcData.abc.measures[index - 1]?.notes.length - 1}`)
+				let note = index
+					? useIndexGetNote(`${index}.0`)
 					: null;
+					note = data.times.find((_note: any) => _note.startChar === note.startChar);
 				// console.log("🚀 ~ note:", note);
 				data.selectMeasures.end = index ? index - 1 : 0;
 				data.selectMeasures.endNote = note;
@@ -1807,6 +1816,7 @@ export default defineComponent({
 													popup.selectSubjectShow = false;
 													abcData.abc.subjectCode =
 														ABCJS.synth.instrumentIndexToName[abcData.synthOptions.program];
+													autoSave();
 												}}
 											></NSelect>
 										</>
@@ -2171,9 +2181,10 @@ export default defineComponent({
 								</NSpin>
 								<div>{data.playState ? "暂停" : "播放"}</div>
 							</div>
+							{/*  styles.btnDisabled */}
 							<div
 								id="selectMearesBtn"
-								class={[styles.topBtn, styles.btnDisabled]}
+								class={[styles.topBtn]}
 								onClick={() => (popup.selectMearesShow = !popup.selectMearesShow)}
 							>
 								<div class={[styles.btnImg, popup.selectMearesShow && styles.btnImgActive]}>