fix

src/pc/home/index.tsx

@@ -260,11 +260,18 @@ export default defineComponent({
 				abcElem,
 				data.music.substring(data.active.startChar, data.active.endChar)
 			);
-			if (abcElem.el_type === "tempo") {
-				abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
+			if (data.active?.el_type === "note") {
+				const totalTime = (abcData.synthControl as any).visualObj.getTotalTime();
+				if (totalTime) {
+					const progress = (data.active as any).currentTrackMilliseconds / 1000 / totalTime;
+					// console.log("🚀 ~ data.active:", data.active, progress);
+					(abcData.synthControl as any).seek(progress);
+				}
 			}
+			// if (abcElem.el_type === "tempo") {
+			// 	abcData.visualObj.engraver.rangeHighlight(abcElem.startChar, abcElem.endChar);
+			// }
 			if (drag && drag.step) {
-				// console.log("🚀 ~ drag:", drag);
 				handleMoveNote("drag", drag.step);
 				return;
 			}
@@ -338,6 +345,16 @@ export default defineComponent({
 			return output;
 		};
 
+		const hideCursor = () => {
+			const cursor = document.querySelector("#paper svg .ABCJS-cursor");
+			if (cursor) {
+				cursor.setAttribute("x1", "0");
+				cursor.setAttribute("x2", "0");
+				cursor.setAttribute("y1", "0");
+				cursor.setAttribute("y2", "0");
+			}
+		};
+
 		const cursorControl = {
 			// self.onReady = function () {
 			// 	var downloadLink = document.querySelector(".download");
@@ -361,19 +378,9 @@ export default defineComponent({
 			// self.beatSubdivisions = 2;
 			onBeat: function (beatNumber: any, totalBeats: any, totalTime: any) {},
 			onEvent: (ev: any) => {
-				console.log("🚀 ~ ev:", ev);
+				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.
 
-				var lastSelection = document.querySelectorAll("#paper svg .highlight");
-				for (var k = 0; k < lastSelection.length; k++) lastSelection[k].classList.remove("highlight");
-
-				for (var i = 0; i < ev.elements.length; i++) {
-					var note = ev.elements[i];
-					for (var j = 0; j < note.length; j++) {
-						note[j].classList.add("highlight");
-					}
-				}
-
 				var cursor = document.querySelector("#paper svg .ABCJS-cursor");
 				if (cursor) {
 					cursor.setAttribute("x1", ev.left + ev.width / 2);
@@ -389,26 +396,12 @@ export default defineComponent({
 				for (var i = 0; i < els.length; i++) {
 					els[i].classList.remove("highlight");
 				}
-				var cursor = document.querySelector("#paper svg .ABCJS-cursor");
-				if (cursor) {
-					cursor.setAttribute("x1", "0");
-					cursor.setAttribute("x2", "0");
-					cursor.setAttribute("y1", "0");
-					cursor.setAttribute("y2", "0");
-				}
+				hideCursor();
 			},
 		};
 
-		const resetMidi = () => {
+		const resetMidi = (useActive = false) => {
 			data.loadingAudioSrouce = true;
-			abcData.synthControl = new ABCJS.synth.SynthController();
-			abcData.synthControl.load("#audio", cursorControl, {
-				displayLoop: true,
-				displayRestart: true,
-				displayPlay: true,
-				displayProgress: true,
-			});
-
 			const midiBuffer = new ABCJS.synth.CreateSynth();
 			// console.log(midiBuffer);
 			midiBuffer
@@ -418,30 +411,32 @@ export default defineComponent({
 				})
 				.then(() => {
 					abcData.synthControl
-						.setTune(abcData.visualObj, false, {
+						.setTune(abcData.visualObj, useActive, {
 							midiTranspose: abcData.abc.visualTranspose,
-							...abcData.synthOptions,
+							program: abcData.synthOptions.program,
 						})
 						.then(function (response) {
 							data.loadingAudioSrouce = false;
 							// console.log("Audio successfully loaded.");
 							// console.log("🚀 ~ abcData.synthControl:", abcData.synthControl);
+						})
+						.catch((err) => {
+							console.log(err);
 						});
 				});
 		};
 
 		const togglePlay = (type: "play" | "pause" | "reset") => {
 			console.log("🚀 ~ abcData.synthControl:", abcData.synthControl);
-
-			if (["play", "pause"].includes(type)) {
-				data.playState = !data.playState;
-				const playBtn: HTMLElement = document.querySelector(".abcjs-midi-start.abcjs-btn")!;
-				if (!playBtn) return;
-				playBtn.click();
-			} else if (type === "reset") {
-				const resetBtn: HTMLElement = document.querySelector(".abcjs-midi-reset.abcjs-btn")!;
-				if (!resetBtn) return;
-				resetBtn.click();
+			if (type === "play") {
+				abcData.synthControl.play();
+				data.playState = true;
+			} else if (type === "pause") {
+				abcData.synthControl.play();
+				data.playState = false;
+				hideCursor();
+			} else {
+				abcData.synthControl.restart();
 			}
 		};
 
@@ -1072,6 +1067,16 @@ export default defineComponent({
 		};
 		onMounted(async () => {
 			await getDetailData();
+			if (ABCJS.synth.supportsAudio()) {
+				abcData.synthControl = new ABCJS.synth.SynthController();
+				abcData.synthControl.load("#audio", cursorControl, {
+					displayLoop: true,
+					displayRestart: true,
+					displayPlay: true,
+					displayProgress: true,
+				});
+			}
+
 			console.log(ABCJS);
 			await handleResetRender();
 			document.addEventListener("keyup", handleKeyUp);
@@ -1438,10 +1443,9 @@ export default defineComponent({
 											options={instruments.value}
 											v-model:value={abcData.synthOptions.program}
 											onUpdate:value={() => {
-												abcData.synthControl.pause();
-												abcData.synthControl.restart();
+												abcData.synthControl.disable(true);
 												data.playState = false;
-												resetMidi();
+												resetMidi(true);
 												popup.selectSubjectShow = false;
 											}}
 										></NSelect>