fix

osmd-extended

@@ -1 +1 @@
-Subproject commit 0ce7bef6b932f8ab1bd8887c901994e10fcbc121
+Subproject commit 13def33cbf2724bc7be2d17b92c36c44eff4ec5d

src/page-instrument/header-top/index.tsx

@@ -224,16 +224,6 @@ export default defineComponent({
 				originBtn.value.display &&
 				toggleBtn.value.display &&
 				showGuide.value;
-			console.log(
-				flag,
-				"flag",
-				converBtn.value.display,
-				speedBtn.value.display,
-				selectBtn.value.display,
-				originBtn.value.display,
-				toggleBtn.value.display,
-				showGuide.value
-			);
 			return flag;
 		});
 

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

@@ -23,7 +23,8 @@
         height: var(--header-height);
         transition: margin .3s;
         z-index: 10;
-        &.headHide{
+
+        &.headHide {
             margin-top: calc(0Px - var(--header-height));
         }
     }
@@ -46,49 +47,79 @@
         margin-top: -14PX;
         border-radius: 4Px;
         background-color: rgba(25, 140, 254, 0.7);
-        width: 8Px;
-        transform: translateX(8Px);
         opacity: var(--corsor-opacity);
     }
-    .eyeProtection{
-        #cursorImg-0{
+
+    .staff {
+        #cursorImg-0 {
+            width: 14Px;
+            transform: translateX(5Px);
+        }
+    }
+
+    .jianpuTone {
+        #cursorImg-0 {
+            width: 18Px;
+            transform: translateX(-3Px);
+        }
+    }
+
+    .eyeProtection {
+        #cursorImg-0 {
             background-color: rgb(255, 159, 88);
         }
     }
-    #osmdCanvasPage1{
+
+    #osmdCanvasPage1 {
         padding-bottom: 60px;
     }
 }
-.xiaomi{
-    :global{
+
+.xiaomi {
+    :global {
         #cursorImg-0 {
             height: 58PX !important;
             min-height: auto !important;
         }
     }
 }
-.PC{
-    :global{
+
+.PC {
+    :global {
         #cursorImg-0 {
             margin-top: -18PX;
             min-height: 94Px;
             border-radius: 10Px;
-            width: 20Px;
-            transform: translateX(12Px);
         }
-        .headTopBackBtn{
+
+        .staff {
+            #cursorImg-0 {
+                width: 35Px;
+            }
+        }
+
+        .jianpuTone {
+            #cursorImg-0 {
+                width: 29Px;
+            }
+        }
+
+        .headTopBackBtn {
             display: none;
         }
-        .pcTitle{
+
+        .pcTitle {
             flex: 1;
             width: auto;
             margin-left: auto;
-            .van-notice-bar__wrap{
+
+            .van-notice-bar__wrap {
                 justify-content: center;
             }
         }
     }
-    .headHeight.headHide{
+
+    .headHeight.headHide {
         margin-top: 0 !important;
     }
 }

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

@@ -20,6 +20,7 @@ import state, {
 	IAudioState,
 	IPlatform,
 	isRhythmicExercises,
+	resetPlaybackToStart,
 } from "/src/state";
 import { browser, setGlobalData } from "../../utils";
 import AudioList from "../../view/audio-list";
@@ -229,6 +230,7 @@ export default defineComponent({
 			state.musicRendered = true;
 
 			evaluatCreateMusicPlayer();
+			resetPlaybackToStart();
 		};
 		/** 指法配置 */
 		const fingerConfig = computed<any>(() => {
@@ -310,7 +312,7 @@ export default defineComponent({
 				class={[
 					styles.detail,
 					state.setting.eyeProtection && "eyeProtection",
-					query.platform === "pc" && styles.PC,
+					state.platform === IPlatform.PC && styles.PC,
 				]}
 				style={{
 					paddingLeft: detailData.paddingLeft,

src/state.ts

@@ -341,11 +341,33 @@ export const gotoCustomNote = (index: number) => {
 		state.osmd.cursor.next();
 	}
 };
+const setCursorPosition = (note: any, cursor: any) => {
+	const scrollContainer = document.getElementById("scrollContainer");
+	const box = scrollContainer?.getBoundingClientRect();
+	if (!box) return;
+	if (
+		state.musicRenderType === EnumMusicRenderType.firstTone ||
+		state.musicRenderType === EnumMusicRenderType.fixedTone
+	) {
+		const noteBox = note?.svgElement.attrs.el
+			?.querySelector(".vf-numbered-note-head")
+			?.getBoundingClientRect();
+		if (!noteBox) return;
+		cursor.cursorElement.style.left = noteBox.x - box.x + "px";
+	}
+};
 /** 跳转到下一个音符 */
 export const gotoNext = (note: any) => {
 	const num = note.i;
-	// console.log('next', state.activeNoteIndex, num)
-	if (state.activeNoteIndex === note.i) return;
+
+	if (state.activeNoteIndex === note.i) {
+		try {
+			setCursorPosition(note, state.osmd.cursor);
+		} catch (error) {
+			console.log(error);
+		}
+		return;
+	}
 	const osmd = state.osmd;
 	let prev = state.activeNoteIndex;
 	state.activeNoteIndex = num;
@@ -361,6 +383,11 @@ export const gotoNext = (note: any) => {
 	} else {
 		gotoCustomNote(num);
 	}
+	try {
+		setCursorPosition(note, state.osmd.cursor);
+	} catch (error) {
+		console.log(error);
+	}
 
 	scrollViewNote();
 };

src/view/music-score/index.tsx

@@ -131,7 +131,10 @@ export default defineComponent({
 			<div
 				id="musicAndSelection"
 				style={{ "--music-zoom": state.musicZoom }}
-				class={[isInTheGradualRange.value && styles.inGradualRange]}
+				class={[
+					isInTheGradualRange.value && styles.inGradualRange,
+					state.musicRenderType == EnumMusicRenderType.staff ? "staff" : "jianpuTone",
+				]}
 			>
 				{props.showSelection && musicData.showSelection && <Selection />}
 			</div>

src/view/selection/index.module.less

@@ -12,7 +12,7 @@
 }
 
 .note {
-    // background-color: rgba(0, 0, 0, .3);
+    cursor: pointer;
 }