feat: 歌词和音符联动

src/helpers/customMusicScore.ts

@@ -544,6 +544,7 @@ export const resetFormate = () => {
 			try {
 				if (list.length) {
 					list.forEach((_el: any) => {
+						stave?.removeChild(_el)
 						_el?.style?.setProperty("display", "none");
 					});
 				}
@@ -555,6 +556,7 @@ export const resetFormate = () => {
 			try {
 				if (list.length) {
 					list.forEach((_el: any) => {
+						stave?.appendChild(_el)
 						_el?.style?.removeProperty("display");
 					});
 				}

src/helpers/formateMusic.ts

@@ -1209,7 +1209,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 				totalMultipleRestMeasures, // 当前小节总的合并小节数
 				measureSpeed,  // 小节速度
 				maxNoteNum: note.maxNoteNum, // 当前小节音符最多的分轨的音符数量
-				repeatIdx: iterator.repeatIdx, // 标记是第几遍循环，从0开始
+				repeatIdx: iterator.repeatIdx || 0, // 标记是第几遍循环，从0开始
 			};
 			// 如果是妙极客的曲子，并且第二遍循环播放需要等待时间，并且是第二遍循环的第一个小节的第一个音符
 			// if (state.isEvxml && state.secondEvXmlBeginTime && nodeDetail.i > 0 && nodeDetail.MeasureNumberXML === 1 && nodeDetail.noteId === 0) {

src/state.ts

@@ -1204,6 +1204,7 @@ const getMusicInfo = async (res: any) => {
   index = tracks.findIndex(item => {  // 筛选出当前的index
     return item === musicObj?.track
   })
+  index = index >= 0 ? index : 0;
   const musicInfo = {
     ...res.data,
     track: musicObj?.track
@@ -1533,6 +1534,19 @@ export const moveSvgDom = (skipNote?: boolean) => {
     }
   })
 
+  // 给当前匹配到的歌词添加颜色
+  const currentNote = state.times[state.activeNoteIndex];
+  const lyrics: SVGAElement[] = Array.from(document.querySelectorAll(".vf-lyric"));
+  lyrics.forEach((lyric) => {
+    lyric?.classList.remove('lyricActive')
+  })
+  const currentLyrics: SVGAElement[] = Array.from(document.querySelectorAll(`.lyric${currentNote?.noteId}`));
+  currentLyrics.forEach((lyric, index) => {
+    if (index === currentNote.repeatIdx) {
+      lyric?.classList.add('lyricActive')
+    }
+  })
+
   /**
    * 计算需要移动的距离
    * 当前选中的音符和第一个音符之间的间距

src/view/music-score/index.module.less

@@ -33,6 +33,12 @@
         // transform: scale(2);
         // transition: all 0.3s;
     }
+    .lyricActive {
+        text {
+            fill: #FFC121;
+            stroke: #FFC121;
+        }
+    }
     .vf-custom-rect {
         position: relative;
         // stroke: grey;