build

src/pc/create/component/the-create/index.tsx

@@ -42,31 +42,31 @@ export default defineComponent({
 		const instruments = [
 			{
 				label: "竖笛",
-				key: "CLARINET",
+				key: "recorder",
 				id: 4,
 				icon: getImage("icon_27_0.png"),
 			},
 			{
 				label: "排箫",
-				key: "PANPIPE",
+				key: "piccolo",
 				id: 1,
 				icon: getImage("icon_27_1.png"),
 			},
 			{
 				label: "口风琴",
-				key: "HARMONICA",
+				key: "pan_flute",
 				id: 5,
 				icon: getImage("icon_27_2.png"),
 			},
 			{
 				label: "陶笛",
-				key: "OCARINA",
+				key: "blown_bottle",
 				id: 2,
 				icon: getImage("icon_27_3.png"),
 			},
 			{
 				label: "葫芦丝",
-				key: "FENUGREEK_SILK",
+				key: "clarinet",
 				id: 3,
 				icon: getImage("icon_27_4.png"),
 			},
@@ -81,6 +81,7 @@ export default defineComponent({
 			meter: ABC_DATA.meter[0],
 			speed: 80,
 			measure: 30,
+			subjectCode: "recorder"
 		});
 
 		const handleCreate = async () => {
@@ -101,6 +102,7 @@ export default defineComponent({
 						meter: froms.meter,
 						speed: `Q:1/4=${froms.speed}`,
 						key: froms.key,
+						subjectCode: froms.subjectCode,
 						measures: initMusic(froms.measure),
 					}),
 					name: "",
@@ -147,7 +149,10 @@ export default defineComponent({
 							{instruments.map((item) => (
 								<div
 									class={[styles.item, froms.subjectId === item.id && styles.itemActive]}
-									onClick={() => (froms.subjectId = item.id)}
+									onClick={() => {
+										froms.subjectId = item.id
+										froms.subjectCode = item.key
+									}}
 								>
 									<div class={styles.itemImg}>
 										<img class={styles.icon} src={item.icon} />

src/pc/home/index.tsx

@@ -12,7 +12,7 @@ import { showConfirmDialog, showToast } from "vant";
 import Keys from "../component/keys";
 import { Collapse, CollapseItem } from "@varlet/ui";
 import { IAbc, IMeasure, INote, INoteActive } from "../types";
-import { ABC_DATA, createMeasure, createNote, renderMeasures } from "./runtime";
+import { ABC_DATA, createMeasure, createNote, moveNoteKey, renderMeasures } from "./runtime";
 import TheIcon from "/src/components/The-icon";
 import { cloneDeep } from "lodash";
 import TheSpeed from "./component/the-speed";
@@ -298,6 +298,7 @@ export default defineComponent({
 				key: "K:C",
 				visualTranspose: 0,
 				transposeKey: "K:C",
+				subjectCode: "acoustic_grand_piano",
 				measures: initMusic(30),
 			} as IAbc,
 		});
@@ -895,15 +896,24 @@ export default defineComponent({
 
 		/** 移调 */
 		const handleMoveKey = (item: (typeof ABC_DATA.key)[0]) => {
-			if (data.moveKeyType === "down") {
-				abcData.abc.visualTranspose = item.step < 0 ? item.step : item.step - 12;
-			} else if (data.moveKeyType === "up") {
-				abcData.abc.visualTranspose = item.step >= 0 ? item.step : item.step + 12;
-			} else {
-				abcData.abc.visualTranspose = item.step;
+			// 将所有的音符移调
+			for (let i = 0; i < abcData.abc.measures.length; i++) {
+				const measure = abcData.abc.measures[i];
+				for (let j = 0; j < measure.notes.length; j++) {
+					const note = measure.notes[j];
+					if (note.content == "z") continue;
+					note.content = moveNoteKey(note.accidental + note.content, item.step, data.moveKeyType);
+				}
 			}
-			// console.log(abcData.abc.visualTranspose, item.step, item.value)
-			abcData.abc.transposeKey = item.value;
+			// if (data.moveKeyType === "down") {
+			// 	abcData.abc.visualTranspose = item.step < 0 ? item.step : item.step - 12;
+			// } else if (data.moveKeyType === "up") {
+			// 	abcData.abc.visualTranspose = item.step >= 0 ? item.step : item.step + 12;
+			// } else {
+			// 	abcData.abc.visualTranspose = item.step;
+			// }
+			// // console.log(abcData.abc.visualTranspose, item.step, item.value)
+			abcData.abc.key = item.value;
 			popup.moveKeyShow = false;
 			handleResetRender();
 		};
@@ -973,6 +983,9 @@ export default defineComponent({
 					abcData.abc.speed = abc.speed || "Q:1/4=60";
 					abcData.abc.visualTranspose = abc.visualTranspose || 0;
 					abcData.abc.transposeKey = abc.transposeKey || "K:C";
+					abcData.abc.subjectCode = abc.subjectCode || "acoustic_grand_piano";
+					const _instruments = ABCJS.synth.instrumentIndexToName.indexOf(abcData.abc.subjectCode as any)
+					abcData.synthOptions.program = _instruments > -1 ? _instruments : 0
 					abcData.abc.measures = abc.measures || initMusic(30);
 					console.log("🚀 ~ abcData.abc:", abcData.abc);
 				}
@@ -1334,10 +1347,10 @@ export default defineComponent({
 											options={instruments.value}
 											v-model:value={abcData.synthOptions.program}
 											onUpdate:value={() => {
+												togglePlay("pause");
 												popup.selectSubjectShow = false;
 												getAudioSource();
 												handleResetRender();
-												togglePlay("pause");
 												togglePlay("reset");
 											}}
 										></NSelect>

src/pc/home/noteData.ts

@@ -0,0 +1,131 @@
+export const ABC_NOTE_DATA = [
+	"C,,,,",
+	["^C,,,,", "_D,,,,"],
+	"D,,,,",
+	["^D,,,,", "_E,,,,"],
+	"E,,,,",
+	"F,,,,",
+	["^F,,,,", "_G,,,,"],
+	"G,,,,",
+	["^G,,,,", "_A,,,,"],
+	"A,,,,",
+	["^A,,,,", "_B,,,,"],
+	"B,,,,",
+
+	"C,,,",
+	["^C,,,", "_D,,,"],
+	"D,,,",
+	["^D,,,", "_E,,,"],
+	"E,,,",
+	"F,,,",
+	["^F,,,", "_G,,,"],
+	"G,,,",
+	["^G,,,", "_A,,,"],
+	"A,,,",
+	["^A,,,", "_B,,,"],
+	"B,,,",
+
+	"C,,",
+	["^C,,", "_D,,"],
+	"D,,",
+	["^D,,", "_E,,"],
+	"E,,",
+	"F,,",
+	["^F,,", "_G,,"],
+	"G,,",
+	["^G,,", "_A,,"],
+	"A,,",
+	["^A,,", "_B,,"],
+	"B,,",
+
+	"C,",
+	["^C,", "_D,"],
+	"D,",
+	["^D,", "_E,"],
+	"E,",
+	"F,",
+	["^F,", "_G,"],
+	"G,",
+	["^G,", "_A,"],
+	"A,",
+	["^A,", "_B,"],
+	"B,",
+
+	"C",
+	["^C", "_D"],
+	"D",
+	["^D", "_E"],
+	"E",
+	"F",
+	["^F", "_G"],
+	"G",
+	["^G", "_A"],
+	"A",
+	["^A", "_B"],
+	"B",
+
+	"c",
+	["^c", "_d"],
+	"d",
+	["^d", "_e"],
+	"e",
+	"f",
+	["^f", "_g"],
+	"g",
+	["^g", "_a"],
+	"a",
+	["^a", "_b"],
+	"b",
+
+	"c'",
+	["^c'", "_d'"],
+	"d'",
+	["^d'", "_e'"],
+	"e'",
+	"f'",
+	["^f'", "_g'"],
+	"g'",
+	["^g'", "_a'"],
+	"a'",
+	["^a'", "_b'"],
+	"b'",
+
+	"c''",
+	["^c''", "_d''"],
+	"d''",
+	["^d''", "_e''"],
+	"e''",
+	"f''",
+	["^f''", "_g''"],
+	"g''",
+	["^g''", "_a''"],
+	"a''",
+	["^a''", "_b''"],
+	"b''",
+
+	"c'''",
+	["^c'''", "_d'''"],
+	"d'''",
+	["^d'''", "_e'''"],
+	"e'''",
+	"f'''",
+	["^f'''", "_g'''"],
+	"g'''",
+	["^g'''", "_a'''"],
+	"a'''",
+	["^a'''", "_b'''"],
+	"b'''",
+
+	"c''''",
+	["^c''''", "_d''''"],
+	"d''''",
+	["^d''''", "_e''''"],
+	"e''''",
+	"f''''",
+	["^f''''", "_g''''"],
+	"g''''",
+	["^g''''", "_a''''"],
+	"a''''",
+	["^a''''", "_b''''"],
+	"b''''",
+];

src/pc/home/runtime.ts

@@ -1,6 +1,7 @@
 import { reactive } from "vue";
 import { IAbc, IMeasure, INote } from "../types";
 import { getImage } from "./images";
+import { ABC_NOTE_DATA } from "./noteData";
 
 export const ABC_DATA = {
 	/** 音符 */
@@ -227,3 +228,95 @@ export const renderMeasures = (abc: IAbc) => {
 	// console.log(text)
 	return text;
 };
+
+const moveNote: any = [
+	"C",
+	["^C", "_D"],
+	"D",
+	["^D", "_E"],
+	"E",
+	"F",
+	["^F", "_G"],
+	"G",
+	["^G", "_A"],
+	"A",
+	["^A", "_B"],
+	"B",
+];
+const keyIndex: any = {
+	C: 0,
+	"^C": 1,
+	_D: 1,
+	D: 2,
+	"^D": 3,
+	_E: 3,
+	E: 4,
+	F: 5,
+	"^F": 6,
+	_G: 6,
+	G: 7,
+	"^G": 8,
+	_A: 8,
+	A: 9,
+	"^A": 10,
+	_B: 10,
+	B: 11,
+};
+const newKey = [
+	"C",
+	"Db",
+	"D",
+	"Eb",
+	"E",
+	"F",
+	"F#",
+	"G",
+	"Ab",
+	"A",
+	"Bb",
+	"B",
+	"C",
+	"Db",
+	"D",
+	"Eb",
+	"E",
+	"F",
+	"F#",
+	"G",
+	"Ab",
+	"A",
+	"Bb",
+	"B",
+];
+export const moveNoteKey = (note: string, step: number, keyType: "inset" | "up" | "down") => {
+	for (let i = 0; i < ABC_NOTE_DATA.length; i++) {
+		const _note = ABC_NOTE_DATA[i];
+		if (_note === note || (Array.isArray(_note) && _note.includes(note))) {
+			let localTranspose = 0;
+			if (keyType === "down") {
+				localTranspose = step < 0 ? step : step - 12;
+			} else if (keyType === "up") {
+				localTranspose = step >= 0 ? step : step + 12;
+			} else {
+				localTranspose = step;
+			}
+
+			// const oldNote = note.replace(/('|,)/g, "");
+			// const oldIndex = ABC_NOTE_DATA.findIndex((item) => item === oldNote || (Array.isArray(item) && item.includes(oldNote)));
+			// let localTranspose = oldIndex - i;
+			// let _localTranspose = 0;	
+			// if (localTranspose > 0) _localTranspose = Math.ceil(localTranspose / 12);
+			// else _localTranspose = Math.floor(localTranspose / 12);
+			// console.log("🚀 ~ _localTranspose:", i , _localTranspose , step, (i + step) % 12)
+			let index = i + localTranspose;
+			const newNote = ABC_NOTE_DATA[index];
+			// console.log("🚀 ~ newNote:", newNote)
+			if (Array.isArray(newNote)) {
+				return newNote[0];
+			} else {
+				return newNote ? newNote : note;
+			}
+		}
+	}
+	return note;
+};

src/pc/types.ts

@@ -64,6 +64,8 @@ export interface IAbc {
 	/** 移调 */
 	visualTranspose?: number;
 	transposeKey?: string;
+	/** 声部 */
+	subjectCode?: string;
 }
 export interface INoteActive extends AbcElem {
 	/** 小节 index */