播放

src/pc/home/index.tsx

@@ -279,7 +279,7 @@ export default defineComponent({
 				clickListener: clickListener,
 				responsive: "resize",
 				dragging: true,
-				selectTypes:  ["note"], // ["note", "clef", "keySignature", "timeSignature", "dynamicDecoration"],
+				selectTypes: ["note"], // ["note", "clef", "keySignature", "timeSignature", "dynamicDecoration"],
 				visualTranspose: 0,
 				wrap: {
 					minSpacing: 2,
@@ -399,6 +399,7 @@ export default defineComponent({
 		};
 
 		const resetMidi = () => {
+			data.loadingAudioSrouce = true;
 			abcData.synthControl = new ABCJS.synth.SynthController();
 			abcData.synthControl.load("#audio", cursorControl, {
 				displayLoop: true,
@@ -409,31 +410,22 @@ export default defineComponent({
 
 			const midiBuffer = new ABCJS.synth.CreateSynth();
 			// console.log(midiBuffer);
-			midiBuffer.init({
-				visualObj: abcData.visualObj,
-				options: { ...abcData.synthOptions, midiTranspose: abcData.abc.visualTranspose },
-			});
-			abcData.synthControl
-				.setTune(abcData.visualObj, false, {
-					midiTranspose: abcData.abc.visualTranspose,
-					...abcData.synthOptions,
-				})
-				.then(function (response) {
-					// console.log("Audio successfully loaded.");
-					// console.log("🚀 ~ abcData.synthControl:", abcData.synthControl);
-				});
-		};
-
-		const getAudioSource = async () => {
-			const midiBuffer = new ABCJS.synth.CreateSynth();
-			data.loadingAudioSrouce = true;
 			midiBuffer
 				.init({
 					visualObj: abcData.visualObj,
-					options: abcData.synthOptions,
+					options: { ...abcData.synthOptions, midiTranspose: abcData.abc.visualTranspose },
 				})
 				.then(() => {
-					data.loadingAudioSrouce = false;
+					abcData.synthControl
+						.setTune(abcData.visualObj, false, {
+							midiTranspose: abcData.abc.visualTranspose,
+							...abcData.synthOptions,
+						})
+						.then(function (response) {
+							data.loadingAudioSrouce = false;
+							// console.log("Audio successfully loaded.");
+							// console.log("🚀 ~ abcData.synthControl:", abcData.synthControl);
+						});
 				});
 		};
 
@@ -441,10 +433,10 @@ export default defineComponent({
 			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();
-				data.playState = !data.playState;
 			} else if (type === "reset") {
 				const resetBtn: HTMLElement = document.querySelector(".abcjs-midi-reset.abcjs-btn")!;
 				if (!resetBtn) return;
@@ -1353,11 +1345,11 @@ export default defineComponent({
 											options={instruments.value}
 											v-model:value={abcData.synthOptions.program}
 											onUpdate:value={() => {
-												togglePlay("pause");
+												abcData.synthControl.pause();
+												abcData.synthControl.restart();
+												data.playState = false;
+												resetMidi();
 												popup.selectSubjectShow = false;
-												getAudioSource();
-												handleResetRender();
-												togglePlay("reset");
 											}}
 										></NSelect>
 									</>

src/pc/home/runtime.ts

@@ -33,13 +33,13 @@ export const ABC_DATA = {
 	],
 	/** 调号 */
 	key: [
+		{ name: "C大调", value: "K:C", step: 0, icon: "icon-a-diaohao-cdadiaoaxiaodiao1" },
 		{ name: "F#大调", value: "K:F#", step: 6, icon: "icon-a-diaohao-fdadiaodxiaodiao" },
 		{ name: "F大调", value: "K:F", step: 5, icon: "icon-a-diaohao-fdadiaodxiaodiao1" },
 		{ name: "E大调", value: "K:E", step: 4, icon: "icon-a-diaohao-edadiaocxiaodiao" },
 		{ name: "Eb大调", value: "K:Eb", step: 3, icon: "icon-a-diaohao-ebdadiaocxiaodiao" },
 		{ name: "D大调", value: "K:D", step: 2, icon: "icon-a-diaohao-Ddaxiaoexiaodiao" },
 		{ name: "C#大调", value: "K:C#", step: 1, icon: "icon-a-diaohao-cdadiaoaxiaodiao" },
-		{ name: "C大调", value: "K:C", step: 0, icon: "icon-a-diaohao-cdadiaoaxiaodiao1" },
 		{ name: "B大调", value: "K:B", step: -1, icon: "icon-a-diaohao-bdadiaogxiaodiao" },
 		{ name: "Cb大调", value: "K:Cb", step: -1, icon: "icon-a-diaohao-cbdadiaoabxiaodiao" },
 		{ name: "Db大调", value: "K:Db", step: -1, icon: "icon-a-diaohao-dbdadiaobbxiaodiao" },