Merge branch 'feature-12.23' into ktyq-online-new

src/helpers/formateMusic.ts

@@ -14,6 +14,8 @@ import {
 	OpenSheetMusicDisplay,
 } from "/osmd-extended/src";
 import { GradualChange, speedInfo } from "./calcSpeed";
+import { beatUnitTo, speedBeatTo } from "/src/helpers/beatConfig"
+
 const browserInfo = browser();
 dayjs.extend(duration);
 
@@ -686,11 +688,19 @@ export const formatXML = (xml: string, xmlUrl?: string): string => {
 		state.originSpeed = speeds[0] ? speeds[0] : 100;
 		state.speed = state.originSpeed;
 	}
+	// 赋值谱面速度节拍器，没有的时候 以后台传入的为准
+	const metronomeXml = xmlParse.getElementsByTagName('metronome')?.[0]
+	const beatUnit = metronomeXml?.getElementsByTagName('beat-unit')?.[0]?.textContent || ''
+	if(beatUnit){
+		const beatUnitDot = metronomeXml?.getElementsByTagName('beat-unit-dot')?.[0]
+		state.speedBeatUnit = beatUnitTo(beatUnit, !!beatUnitDot)
+	}	
 	// 如果谱面和小节都没有打速度，osmd设置的小节速度默认取后台设置的速度
 	if (speeds.length === 0) {
 		;(window as any).baseMeasureSpeed = state.originSpeed
 	} else {
-		state.originAudioPlayRate = speeds[0] / state.originSpeed
+		// 当前谱面的速度转为4分音符速度 因为我们速度比例转为4分音符了
+		state.originAudioPlayRate = speedBeatTo({unit:state.speedBeatUnit, speed:speeds[0]}, "1/4") / state.originSpeed
 	}
 	console.log('是否是变速的曲子：',hasVaryingSpeed,speeds)
 
@@ -853,6 +863,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 	let preNoteEndTime = 0; // 上一个音符的结束时间
 
 	let preNoteMeasureNumber: any = null; // 上一个小节的number值
+	let currentRealTempo: any = {}; // 当前小节的速度与拍号信息
 
 	const _notes = [] as any[];
 	if (state.gradualTimes) {
@@ -966,13 +977,20 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 			}
 			note.maxNoteNum = maxNoteNum;
 			note.trackIndex = minIndex;
+			currentRealTempo = iterator.currentMeasure.tempoExpressions.length ? iterator.currentMeasure.tempoExpressions.find((item: any) => item?.InstantaneousTempo?.isMetronomeMark)?.InstantaneousTempo || currentRealTempo : currentRealTempo;
+			const { beatUnit="quarter", dotted=false, tempoInBpm=state.originSpeed } = currentRealTempo
+			const speedBeatUnit = beatUnitTo(beatUnit, dotted)			
 			_notes.push({
 				note,
 				iterator: { ...iterator },
 				currentTime,
 				isDouble,
 				isMutileSubject,
-				measuresTempoInBPM: note?.sourceMeasure?.tempoInBPM
+				// measuresTempoInBPM: note?.sourceMeasure?.tempoInBPM,
+				// 转换成1/4拍的速度
+				measuresTempoInBPM: speedBeatTo({unit: speedBeatUnit || "1/4",speed: tempoInBpm || 0}, `1/4`),
+				speedBeatUnit, // 当前谱面小节的速度对应的是几分音符
+				currentRealTempo
 			});
 		}
 
@@ -990,7 +1008,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 	console.log('变速曲子',hasVaryingSpeed, _notes)
 	let noteIds: any = [];
 	// let voicesBBox: any = null;
-	for (let { note, iterator, currentTime, isDouble, isMutileSubject } of _notes) {
+	for (let { note, iterator, currentTime, isDouble, isMutileSubject, speedBeatUnit, measuresTempoInBPM } of _notes) {
 		if (note) {
 			if (preMeasureNumber != note?.sourceMeasure?.MeasureNumberXML) {
 				si = 0
@@ -999,14 +1017,14 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 				preMeasureNumber = note?.sourceMeasure?.MeasureNumberXML
 				allMeasures.push(note.sourceMeasure);
 			}
-			if (si === 0 && state.isSpecialBookCategory) {
-				for (const expression of (note.sourceMeasure as SourceMeasure)?.TempoExpressions) {
-					if (expression?.InstantaneousTempo?.beatUnit) {
-						// 取最后一个有效的tempo
-						beatUnit = expression.InstantaneousTempo.beatUnit;
-					}
-				}
-			}
+			// if (si === 0 && state.isSpecialBookCategory) {
+			// 	for (const expression of (note.sourceMeasure as SourceMeasure)?.TempoExpressions) {
+			// 		if (expression?.InstantaneousTempo?.beatUnit) {
+			// 			// 取最后一个有效的tempo
+			// 			beatUnit = expression.InstantaneousTempo.beatUnit;
+			// 		}
+			// 	}
+			// }
 			// 判断是否是同一小节
 			if (staveIndex == note.sourceMeasure?.MeasureNumberXML && i !== 0) {
 				staveNoteIndex++
@@ -1098,12 +1116,15 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 
 			let beatSpeed = 0;
 			// 速度不能为0 此处的速度应该是按照设置的速度而不是校准后的速度，否则mp3速度不对
-			if (measureSpeed !== baseSpeed && !hasVaryingSpeed) {
-				beatSpeed = baseSpeed || measureSpeed || 100
-			} else {
-				beatSpeed = (state.isSpecialBookCategory ? measureSpeed : baseSpeed) || 1;
-			}
+			// if (measureSpeed !== baseSpeed && !hasVaryingSpeed) {
+			// 	beatSpeed = baseSpeed || measureSpeed || 100
+			// } else {
+			// 	beatSpeed = (state.isSpecialBookCategory ? measureSpeed : baseSpeed) || 1;
+			// }
+			// 计算音符时值，使用转换成1/4的速度计算
+			beatSpeed = measuresTempoInBPM;
 			// let beatSpeed = measureSpeed || baseSpeed
+			beatSpeed = beatSpeed / state.originAudioPlayRate;
 			// 如果有节拍器,需要将节拍器的时间算出来
 			if (i === 0) {
 				if(state.isOpenMetronome){
@@ -1116,7 +1137,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 			}
 			// console.log(getTimeByBeatUnit(beatUnit, measureSpeed, iterator.currentMeasure.activeTimeSignature.Denominator))
 			let gradualLength = 0;
-			let speed = (state.isSpecialBookCategory ? measureSpeed : baseSpeed) || 1;
+			let speed = measureSpeed ? measureSpeed : baseSpeed;
 			gradualChange = iterator.currentMeasure.speedInfo || gradualChange;
 			gradualSpeed = osmd.Sheet.SoundTempos?.get(note.sourceMeasure.measureListIndex) || gradualSpeed;
 			if (!gradualSpeed || gradualSpeed.length < 2) {
@@ -1411,7 +1432,8 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 				firstVerticalMeasure: activeVerticalMeasureList[0],
 				noteLength: 1,
 				osdmContext: osmd,
-				speedbeatUnit: beatUnit,
+				// speedbeatUnit: beatUnit,
+				speedBeatUnit,
 				multipleRestMeasures: multipleRestMeasures, // 当前合并小节的索引，从1开始到当前的totalMultipleRestMeasures结束，
 				totalMultipleRestMeasures, // 当前小节总的合并小节数
 				measureSpeed,  // 小节速度

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

@@ -915,7 +915,7 @@ export default defineComponent({
                   <img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickoff.png")} />
                   <span style={{ whiteSpace: "nowrap" }}>节拍</span>
                   <div class={styles.speedCon}>
-                    <img src={headImg("speed.png")} />
+                    <img src={headImg(`${state.speedIcon}.png`)} />
                     <div>{Math.floor(state.speed)}</div>
                   </div>
                 </div>

src/page-instrument/header-top/speed/index.module.less

@@ -75,7 +75,7 @@
             background: #EAF2FB;
             border-radius: 12px;
             overflow-y: auto;
-            padding: 12px 16px 0;
+            padding: 12px 16px;
             &::-webkit-scrollbar {
                 width: 0;
                 display: none;
@@ -166,19 +166,24 @@
                 }
             }
             .speedSel{
-                margin-top: 20px;
+                margin-top: 8px;
                 padding-bottom: 18px;
                 display: flex;
                 justify-content: space-between;
+                flex-wrap: wrap;
                 & > div{
-                    padding: 6px 13px;
+                    width: 42px;
+                    height: 24px;
+                    line-height: 24px;
+                    text-align: center;
                     background: #FFFFFF;
                     border-radius: 14px;
                     font-weight: 400;
                     font-size: 13px;
                     color: rgba(0,0,0,0.6);
-                    line-height: 1;
                     cursor: pointer;
+                    margin-top: 10px;
+                    margin-right: 3px;
                     &:active{
                         background: linear-gradient( 131deg, #44CAFF 0%, #259CFE 100%);
                         color: #fff;

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

@@ -36,11 +36,13 @@ export default defineComponent({
 			() => speed.value,
 			() => {
 				// handleSetSpeed(speed.value);
-				state.speed = Math.floor(speed.value);
+				state.speed = speed.value
 				// handleSetSpeed(speed.value);
 				if (state.playState === 'paused') {
-					const currentItem: any = (state.sectionStatus && state.section.length === 2) ? state.sectionFirst || state.section[0] : state.times[state.activeNoteIndex];
+					// const currentItem: any = (state.sectionStatus && state.section.length === 2) ? state.sectionFirst || state.section[0] : state.times[state.activeNoteIndex];
+					const currentItem: any = state.times[state.activeNoteIndex];
 					state.basePlayRate = currentItem?.measureSpeed ? state.speed / currentItem.measureSpeed : state.speed / state.originSpeed;
+					// console.log('播放倍率2',state.basePlayRate)
 				}
 			}
 		);
@@ -136,11 +138,9 @@ export default defineComponent({
 						</div>
 						<div class={[styles.speedSel, (workData.trainingType === "PRACTICE" || workData.trainingType === "EVALUATION") && styles.disableSpend]}>
 							<div onClick={resetCurrentSpeed}>原速</div>
-							<div onClick={()=>{ speed.value = 70 }}>70</div>
-							<div onClick={()=>{ speed.value = 80 }}>80</div>
-							<div onClick={()=>{ speed.value = 90 }}>90</div>
-							<div onClick={()=>{ speed.value = 100 }}>100</div>
-							<div onClick={()=>{ speed.value = 110 }}>110</div>
+							{[60,70,80,90,100,110,120,130,140,150,160].map((item) => (
+								<div onClick={()=>{ speed.value = item }}>{item}</div>
+							))}
 						</div>
 						{
 							state.isMixBeat && 

src/state.ts

@@ -22,7 +22,7 @@ import { musicScoreRef, headerColumnHide } from "/src/page-instrument/view-detai
 import { headTopData } from "/src/page-instrument/header-top/index";
 import { api_lessonTrainingTrainingStudentDetail } from "/src/page-instrument/api"
 import { undoData, moveData } from "/src/view/plugins/move-music-score"
-import { speedBeatTo } from "/src/helpers/beatConfig"
+import { speedBeatTo, unitImgs } from "/src/helpers/beatConfig"
 
 const query: any = getQuery();
 
@@ -588,6 +588,10 @@ const state = reactive({
   firstMeasureNumber: 1,
   totalMeasureNumber: 0, // xml一轨总共的小节数
   isFullEvaluatWork: false, // 是否是完整评测作业，完整评测作业可以保存作品  
+  /** 是否是自动重播，练习模式开启自动重播时，播放前不需要再次计算播放倍率了，还是按照上次的播放倍率播放音频 */
+  isAutoRePlay: false,
+  /** 右上角速度图标，根据当前小节的速度是几分音符的动态变化 */
+  speedIcon: 'speed3', // 默认取1/4拍的图片
 });
 const browserInfo = browser();
 let offset_duration = 0;
@@ -638,6 +642,8 @@ const autoResetPlay = () => {
   offsetTop = 0;
   scrollViewNote();
   setTimeout(() => {
+    // 自动播放，不需要再次计算播放倍率
+    state.isAutoRePlay = true;
     togglePlay("play");
   }, 1000);
 };
@@ -666,25 +672,31 @@ export const onEnded = () => {
 
 // 根据当前小节动态设置，右上角展示的速度
 const dynamicShowPlaySpeed = (index: number) => {
-  if (!headerColumnHide.value) {
-    // console.log('动态计算速度')
+  //if (!headerColumnHide.value) {
     const item: any = state.times[index];
     if (item && item.measureSpeed ) {
       // console.log('速度1',item.measureSpeed)
-      const newSpeed = Math.floor(state.basePlayRate * item.measureSpeed)
+      const newSpeed = state.basePlayRate * item.measureSpeed
       if (state.speed !== newSpeed) {
         state.speed = newSpeed;
       }
     }
-  }
+  //}
 
 }
 
 // 开始播放时，计算mp3的播放倍率
 export const initSetPlayRate = () => {
-  const item: any = (state.sectionStatus && state.section.length === 2) ? state.sectionFirst || state.section[0] : state.times[state.activeNoteIndex];
+  // 自动播放，不需要再次计算播放倍率
+  if (state.isAutoRePlay) {
+    state.isAutoRePlay = false
+    return
+  }  
+  // const item: any = (state.sectionStatus && state.section.length === 2) ? state.sectionFirst || state.section[0] : state.times[state.activeNoteIndex];
+  let item: any = state.times[state.activeNoteIndex];
+  console.log('播放状态',state.playState)  
   if (item && item.measureSpeed) {
-    const ratio = state.speed / Math.floor(item.measureSpeed)
+    const ratio = state.speed / item.measureSpeed
     // state.audiosInstance?.setSpeed(ratio)
     state.basePlayRate = ratio || 1;
     console.log('播放倍率',state.basePlayRate)
@@ -792,7 +804,7 @@ export const skipNotePlay = async (itemIndex: number, isStart = false) => {
   if (item) {
     // 非选段模式,点击音符，动态设置右下角的速度
     if (item.measureSpeed && state.section.length < 2) {
-      state.speed = Math.floor(state.basePlayRate * item.measureSpeed)
+      state.speed = state.basePlayRate * 10000 * item.measureSpeed / 10000
     }
     setAudioCurrentTime(itemTime, itemIndex);
     // 一行谱，点击音符，或者播放完成，需要跳转音符位置
@@ -1148,7 +1160,8 @@ export const handleSetSpeed = (speed: number) => {
   // setStorageSpeed(state.examSongId, speed);
   state.speed = speed;
   // 当前的音符
-  const currentItem: any = (state.sectionStatus && state.section.length === 2) ? state.sectionFirst || state.section[0] : state.times[state.activeNoteIndex];
+  // const currentItem: any = (state.sectionStatus && state.section.length === 2) ? state.sectionFirst || state.section[0] : state.times[state.activeNoteIndex];
+  const currentItem: any = state.times[state.activeNoteIndex];
   state.basePlayRate = currentItem?.measureSpeed ? state.speed / currentItem.measureSpeed : state.speed / state.originSpeed;
   const actualRate = state.originAudioPlayRate * state.basePlayRate;
   console.log('速度设置',speed,'小节计算的倍率',state.basePlayRate,'实际播放倍率',actualRate)
@@ -2032,6 +2045,10 @@ function getNeedReduceMultipleRestNum(currMeasureIndex: number) {
 watch(
   () => state.activeMeasureIndex,
   () => {
+    // 监听音符小节的变化，取对应的小节速度图片
+    const currentNote = state.times[state.activeNoteIndex]
+    state.speedIcon = unitImgs[currentNote.speedBeatUnit]
+        
     // 需要减去的合并小节数
     // const needReduceMultipleRestNum = getNeedReduceMultipleRestNum(state.activeMeasureIndex)
     // const matchMeasureNum = state.activeMeasureIndex - needReduceMultipleRestNum - 1

src/view/music-score/index.tsx

@@ -210,7 +210,7 @@ export default defineComponent({
 			const activeMeasureIndex = state.times[state.activeNoteIndex]?.measureListIndex || -1;
 			for (const [first, last] of state.gradual) {
 				if (first && last) {
-					console.log('小节',first.measureIndex,last.measureIndex,activeMeasureIndex)
+					// console.log('小节',first.measureIndex,last.measureIndex,activeMeasureIndex)
 					result = first.measureIndex <= activeMeasureIndex && activeMeasureIndex < last.measureIndex;
 					if (result) {
 						break;