葫芦丝

src/page-instrument/view-figner/index.module.less

@@ -1,3 +1,10 @@
+@font-face {
+    font-family: 'jianzhu';
+    src: url('./lsy.ttf');
+    font-weight: normal;
+    font-size: normal;
+}
+
 .fingerBox {
     position: relative;
     display: flex;
@@ -5,11 +12,14 @@
     width: 100vw;
     height: 100vh;
     background-color: antiquewhite;
+    background-image: url('./image/icon_bg.png');
+    background-size: 100% auto;
 }
 
 .head {
     position: relative;
     width: 100%;
+    z-index: 10;
 
     .backBtn {
         width: 22px;
@@ -35,8 +45,9 @@
             height: 140%;
             z-index: 10;
         }
-        &.backRight{
-            &::after{
+
+        &.backRight {
+            &::after {
                 right: 85px;
                 width: auto;
             }
@@ -127,10 +138,20 @@
         border: 1px solid rgba(255, 255, 255, 0.81);
         overflow-y: hidden;
         overflow-x: auto;
-        &::-webkit-scrollbar{
+
+        &::-webkit-scrollbar {
             width: 0;
             display: none;
         }
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 0;
+
+        }
     }
 
     .note {
@@ -160,19 +181,33 @@
             align-items: center;
             z-index: 1;
             font-size: 16px;
-            font-family: GJJSZJW--GB1-0, GJJSZJW--GB1;
+            font-family: 'jianzhu';
             font-weight: normal;
             color: #FFFFFF;
             text-shadow: 0px 1px 3px #1EADF1;
             line-height: 1;
             height: 100%;
 
+            &.keyActive {
+                text-shadow: 0px 1px 3px #F6A81B;
+            }
+
             .dot {
                 width: 3px;
                 height: 3px;
                 border-radius: 50%;
                 background-color: #fff;
             }
+
+            .noteName {
+                position: relative;
+            }
+
+            .mark {
+                position: absolute;
+                left: -80%;
+                font-size: 12px;
+            }
         }
     }
 }
@@ -227,7 +262,7 @@
     pointer-events: auto;
 }
 
-.disabled{
+.disabled {
     opacity: .5;
     pointer-events: none;
-}
+}

src/page-instrument/view-figner/index.tsx

@@ -21,18 +21,19 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-        subject:{
-            type: String as PropType<IVocals>,
-            default: ""
-        }
+		subject: {
+			type: String as PropType<IVocals>,
+			default: "",
+		},
 	},
 	setup(props, { emit }) {
-        const subject = props.subject || "pan-flute"
+		const subject = props.subject || "pan-flute";
 		const data = reactive({
 			subject: subject,
 			realKey: 0,
 			notes: [] as IFIGNER_INSTRUMENT_Note[],
 			soundFonts: {} as any,
+			viewIndex: 0,
 		});
 		const fingerData = reactive({
 			relationshipIndex: 0,
@@ -46,15 +47,19 @@ export default defineComponent({
 			}
 		};
 		const getFingeringData = async () => {
-			fingerData.subject = await getFingeringConfig(data.subject);
+			const subject: any = data.subject + (data.viewIndex === 0 ? "" : data.viewIndex);
+			fingerData.subject = await getFingeringConfig(subject);
 		};
 		const getSounFonts = () => {
 			const pathname = /(192|localhost)/.test(location.origin) ? "/" : location.pathname;
 			for (let i = 0; i < data.notes.length; i++) {
 				const note = data.notes[i];
-				// console.log("🚀 ~ note:", note)
+				// console.log("🚀 ~ note:", i)
+				let url = `${pathname}soundfonts/${data.subject}/`;
+				url += note.realName;
+				url += ".mp3";
 				const noteAudio = new Howl({
-					src: `${pathname}soundfonts/${data.subject}/${note.name}${note.octave}.mp3`,
+					src: url,
 					loop: true,
 				});
 				data.soundFonts[note.realKey] = noteAudio;
@@ -108,11 +113,26 @@ export default defineComponent({
 				<div class={styles.fingerBox}>
 					<div class={styles.head}>
 						<div class={styles.left}>
-							{/* data.subject === 'pan-flute' && styles.backRight */}
-							<button class={[styles.backBtn ]} onClick={() => handleBack()}>
+							<button
+								class={[styles.backBtn, data.subject === "pan-flute" && styles.backRight]}
+								onClick={() => handleBack()}
+							>
 								<img src={icons.icon_back} />
 							</button>
-							{/* {data.subject === 'pan-flute' && <div class={styles.baseBtn}>切换视图</div>} */}
+							{data.subject === "pan-flute" && (
+								<div
+									class={styles.baseBtn}
+									onClick={() => {
+										data.viewIndex++;
+										if (data.viewIndex > 1) {
+											data.viewIndex = 0;
+										}
+										getFingeringData();
+									}}
+								>
+									切换视图
+								</div>
+							)}
 						</div>
 						<div class={styles.rightBtn}>
 							<div class={[styles.item, styles.disabled]}>
@@ -169,9 +189,15 @@ export default defineComponent({
 											<img draggable={false} src={icons.icon_btn_blue} />
 										)}
 
-										<div class={styles.noteKey}>
+										<div class={[styles.noteKey, data.realKey === note.realKey && styles.keyActive]}>
 											{note.step > 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
-											<span>{note.key}</span>
+
+											<div class={styles.noteName}>
+												<sup>
+													{note.mark && (note.mark === "rise" ? "#" : "b")}
+												</sup>
+												{note.key}
+											</div>
 											{note.step < 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
 										</div>
 									</div>

src/view/figner-preview/index.ts

@@ -4,6 +4,10 @@ export interface IFIGNER_INSTRUMENT_Note {
 	octave: number;
 	step: number;
 	realKey: number;
+	/** 升降记号 */
+	mark?: 'rise' | 'fall';
+	/** 音名 */
+	realName: string;
 }
 interface IFIGNER_INSTRUMENT_DATA {
 	list: IFIGNER_INSTRUMENT_Note[];
@@ -18,6 +22,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 4,
 				step: -1,
 				realKey: 55,
+				realName: "G4",
 			},
 			{
 				key: 6,
@@ -25,6 +30,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 4,
 				step: -1,
 				realKey: 57,
+				realName: "A4",
 			},
 			{
 				key: 7,
@@ -32,6 +38,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 4,
 				step: -1,
 				realKey: 59,
+				realName: "B4",
 			},
 			{
 				key: 1,
@@ -39,6 +46,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 60,
+				realName: "C5",
 			},
 			{
 				key: 2,
@@ -46,6 +54,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 62,
+				realName: "D5",
 			},
 			{
 				key: 3,
@@ -53,6 +62,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 64,
+				realName: "E5",
 			},
 			{
 				key: 4,
@@ -60,6 +70,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 65,
+				realName: "F5",
 			},
 			{
 				key: 5,
@@ -67,6 +78,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 67,
+				realName: "G5",
 			},
 			{
 				key: 6,
@@ -74,6 +86,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 69,
+				realName: "A5",
 			},
 			{
 				key: 7,
@@ -81,6 +94,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 71,
+				realName: "B5",
 			},
 			{
 				key: 1,
@@ -88,6 +102,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 6,
 				step: 1,
 				realKey: 72,
+				realName: "C6",
 			},
 			{
 				key: 2,
@@ -95,6 +110,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 6,
 				step: 1,
 				realKey: 74,
+				realName: "D6",
 			},
 			{
 				key: 3,
@@ -102,6 +118,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 6,
 				step: 1,
 				realKey: 76,
+				realName: "E6",
 			},
 			{
 				key: 4,
@@ -109,6 +126,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 6,
 				step: 1,
 				realKey: 77,
+				realName: "F6",
 			},
 			{
 				key: 5,
@@ -116,6 +134,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 6,
 				step: 1,
 				realKey: 79,
+				realName: "G6",
 			},
 			{
 				key: 6,
@@ -123,6 +142,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 6,
 				step: 1,
 				realKey: 81,
+				realName: "A6",
 			},
 			{
 				key: 7,
@@ -130,6 +150,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 6,
 				step: 1,
 				realKey: 83,
+				realName: "B6",
 			},
 			{
 				key: 1,
@@ -137,6 +158,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 7,
 				step: 2,
 				realKey: 84,
+				realName: "C7",
 			},
 			{
 				key: 2,
@@ -144,6 +166,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 7,
 				step: 2,
 				realKey: 86,
+				realName: "D7",
 			},
 			{
 				key: 3,
@@ -151,6 +174,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 7,
 				step: 2,
 				realKey: 88,
+				realName: "E7",
 			},
 			{
 				key: 4,
@@ -158,6 +182,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 7,
 				step: 2,
 				realKey: 89,
+				realName: "F7",
 			},
 		],
 	},
@@ -168,8 +193,152 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				name: "E",
 				octave: 4,
 				step: -1,
-				realKey: 55,
-			}
+				realKey: 64,
+				realName: 'E4'
+			},
+			{
+				key: 4,
+				name: "F",
+				octave: 4,
+				step: -1,
+				realKey: 65,
+				realName: 'F4'
+			},
+			{
+				key: 4,
+				name: "F",
+				octave: 4,
+				step: -1,
+				mark: 'rise',
+				realKey: 66,
+				realName: 'Gb4'
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 4,
+				step: -1,
+				realKey: 67,
+				realName: 'G4'
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 4,
+				step: -1,
+				mark: 'fall',
+				realKey: 68,
+				realName: 'Ab4'
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 4,
+				step: -1,
+				realKey: 69,
+				realName: 'A4'
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 4,
+				step: -1,
+				mark: 'fall',
+				realKey: 70,
+				realName: 'Bb4'
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 4,
+				step: -1,
+				realKey: 71,
+				realName: 'B4'
+			},
+			{
+				key: 1,
+				name: "C",
+				octave: 5,
+				step: 0,
+				realKey: 72,
+				realName: 'C5'
+			},
+			{
+				key: 1,
+				name: "C",
+				octave: 5,
+				step: 0,
+				mark: 'rise',
+				realKey: 73,
+				realName: 'Db5'
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 5,
+				step: 0,
+				realKey: 74,
+				realName: 'D5'
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 5,
+				step: 0,
+				mark: 'fall',
+				realKey: 75,
+				realName: 'Eb5'
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 5,
+				step: 0,
+				realKey: 76,
+				realName: 'E5'
+			},
+			{
+				key: 4,
+				name: "F",
+				octave: 5,
+				step: 0,
+				realKey: 77,
+				realName: 'F5'
+			},
+			{
+				key: 4,
+				name: "F",
+				octave: 5,
+				step: 0,
+				mark: 'rise',
+				realKey: 78,
+				realName: 'Gb5'
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 5,
+				step: 0,
+				realKey: 79,
+				realName: 'G5'
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 5,
+				step: 0,
+				mark: 'fall',
+				realKey: 80,
+				realName: 'Ab5'
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 5,
+				step: 0,
+				realKey: 81,
+				realName: 'A5'
+			},
 		],
 		list1: [
 

src/view/fingering/fingering-config.ts

@@ -37,6 +37,7 @@ export type IVocals =
 	| "piccolo"
 	| "hulusi-flute"
 	| "pan-flute"
+	| "pan-flute1"
 	| "ocarina"
 	| "melodica";
 
@@ -104,8 +105,8 @@ export const mappingVoicePart = (
 			4: 120,
 			3: "hulusi-flute",
 			1: "pan-flute",
-			// 2: "ocarina",
-			// 5: "melodica",
+			2: "ocarina",
+			5: "melodica",
 			renorrecorder: 120,
 			woodwind: "hulusi-flute",
 			panpipes: "pan-flute",
@@ -186,8 +187,8 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 		case "pan-flute": // 排箫
 			return {
 				name: "pan-flute",
-				direction: "vertical",
-				width: "3rem",
+				direction: "transverse",
+				height: "2.6rem",
 				disabledFinger: true,
 				orientation: 0,
 			};
@@ -304,6 +305,12 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 				json: pan.default,
 				relationship: relationships.pan,
 			};
+		case "pan-flute1":
+			const pan1 = await import(`./fingering-img/pan-flute1/index.json`);
+			return {
+				json: pan1.default,
+				relationship: relationships.pan,
+			};
 		case "ocarina":
 			const ocarina = await import(`./fingering-img/ocarina/index.json`);
 			return {

src/view/fingering/fingering-relationships.ts

@@ -393,18 +393,24 @@ const relationships = {
 		64: ["left", "right"],
 	},
 	hulusi: {
-		59: [7, 6, 5, 4, 3, 2, 1],
-		60: [7, 6, 5, 4, 3, 2],
-		61: [7, 6, 5, 4, 3],
-		62: [7, 6, 5, 4],
-		63: [7, 6, 5],
-		64: [7, 6],
-		65: [
-			[7, 5, 4, 3, 2, 1],
-			[7, 5, 4, 3, 2],
-			[7, 66],
-		],
-		66: [7],
+		64: [7, 6, 5, 4, 3, 2, 1],
+		65: [7, 6, 5, 4, 3, 2, 11],
+		66: [7, 6, 5, 4, 3, 2],
+		67: [7, 6, 5, 4, 3, 2, 1],
+		68: [7, 6, 5, 4, 3, 2, 11],
+		69: [7, 6, 5, 4, 3, 2],
+		70: [7, 6, 5, 4, 3, 1],
+		71: [7, 6, 5, 4, 3],
+		72: [7, 6, 5, 4],
+		73: [7, 6, 5, 3, 2],
+		74: [7, 6, 5],
+		75: [7, 6, 4, 3],
+		76: [7, 6],
+		77: [7, 5, 4, 3, 2],
+		78: [7, 5, 4],
+		79: [7],
+		80: [6],
+		81: [],
 	},
 	pan: {
 		55: [21],