Ver código fonte

Merge branch 'hqyDevNewVersion' of http://git.dayaedu.com/liushengqiang/music-score into feature-tianyong-newVersion

TIANYONG 10 meses atrás
pai
commit
ced645a5d1

+ 6 - 2
src/page-instrument/header-top/index.tsx

@@ -107,6 +107,8 @@ let resetBtn: ComputedRef<{
   display: boolean;
   disabled: boolean;
 }>;
+// 点击切换的时候才触发提醒
+let isClickMode = false
 /**
  * 处理模式切换
  * @param oldPlayType   没改变之前的播放模式
@@ -128,13 +130,14 @@ export function handlerModeChange(oldPlayType: "play" | "sing", oldPlaySource: I
     // 隐藏重播按钮
     resetBtn && (resetBtn.value.display = false);
   }
-  // 当模式改变的时候  放在这里是因为需要等谱面加载完成之后再提示
-  if(headTopData.oldPlayType !== state.playType){
+  // 当模式改变的时候  放在这里是因为需要等谱面加载完成之后再提示(点击按钮模式切换才提示)
+  if(isClickMode){
     showToast({
       message: state.playType === "play" ? "已切换为演奏场景" : "已切换为演唱场景",
       position: "top",
       className: "selectionToast",
     });
+    isClickMode = false
   }
 }
 // 模式切换之后重新给times赋值
@@ -727,6 +730,7 @@ export default defineComponent({
                   state.playType = "play";
                   state.playSource = state.music ? "music" : "background";
                 }
+                isClickMode = true
                 // 有指法并且显示指法的时候 切换到演唱模式 需要影藏指法
                 let isRefresh = false;
                 if (state.isShowFingering && state.fingeringInfo.name && (state.setting.displayFingering || displayFingeringCache)) {

+ 14 - 10
src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -19,7 +19,7 @@ type smoothAnimationType = {
    osmdCanvasPageDom: null | HTMLElement
    osdmScrollDom: null | HTMLElement
    osdmScrollDomWith: number
-   osdmScrollDomOffsetWidth: number
+   osdmScrollDomOffsetLeft: number
    selectionBoxDom: null | HTMLElement
    pointsPos: pointsPosType
    translateXNum: number
@@ -39,7 +39,7 @@ export const smoothAnimationState = {
    osmdCanvasPageDom: null,
    osdmScrollDom: null,
    osdmScrollDomWith: 0,
-   osdmScrollDomOffsetWidth: 0,
+   osdmScrollDomOffsetLeft: 0,
    selectionBoxDom: null,
    pointsPos: [], // 计算之后的点坐标数组
    translateXNum: 0, // 当前谱面的translateX的距离   谱面的位置信息 由translateX和scrollLeft的偏移一起决定
@@ -105,7 +105,7 @@ export function destroySmoothAnimation() {
       osmdCanvasPageDom: null,
       osdmScrollDom: null,
       osdmScrollDomWith: 0,
-      osdmScrollDomOffsetWidth: 0,
+      osdmScrollDomOffsetLeft: 0,
       selectionBoxDom: null,
       pointsPos: [],
       translateXNum: 0,
@@ -135,6 +135,10 @@ export function moveSmoothAnimationByPlayTime(time?: number) {
    const noteDuration =
       (nextIndex > state.times.length - 1 ? state.times[state.activeNoteIndex]?.endtime : state.times[nextIndex].time) -
       state.times[state.activeNoteIndex]?.time
+   // 妙极客曲目 有可能2个音符时值一样
+   if (noteDuration <= 0) {
+      return
+   }
    // 当前时值在该区间的占比
    let playProgress = (currentTime - state.times[state.activeNoteIndex]?.time) / noteDuration
    // 华为手机 fixtime 有个默认0.08的值,所以进度可能为负数 ,这里兼容一下
@@ -187,8 +191,8 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
    const clientWidth = smoothAnimationState.osdmScrollDomWith
    const clientMidWidth = clientWidth / 2
    let { left, right, width } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
-   left -= smoothAnimationState.osdmScrollDomOffsetWidth
-   right -= smoothAnimationState.osdmScrollDomOffsetWidth
+   left -= smoothAnimationState.osdmScrollDomOffsetLeft
+   right -= smoothAnimationState.osdmScrollDomOffsetLeft
    const midBotNum = left + width / 2
    // 分阶段移动
    if (right > clientWidth) {
@@ -233,8 +237,8 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
       smoothAnimationState.translateXNum += speed * 5
    }
    // 最多移动的位置
-   const maxTranslateXNum =
-      smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - (smoothAnimationState.osdmScrollDom?.scrollLeft || 0)
+   const osdmScrollDomScrollLeft = smoothAnimationState.osdmScrollDom?.scrollLeft || 0
+   const maxTranslateXNum = smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - osdmScrollDomScrollLeft
    if (smoothAnimationState.translateXNum > maxTranslateXNum) {
       smoothAnimationState.translateXNum = maxTranslateXNum
    }
@@ -262,7 +266,7 @@ function smoothAnimationMove(pos: { x: number; y: number }, pointsPos: pointsPos
  */
 export function calcClientWidth() {
    smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom?.offsetWidth || 0
-   smoothAnimationState.osdmScrollDomOffsetWidth = smoothAnimationState.osdmScrollDom?.offsetLeft || 0
+   smoothAnimationState.osdmScrollDomOffsetLeft = smoothAnimationState.osdmScrollDom?.getBoundingClientRect().left || 0
 }
 /**
  * 创建dom
@@ -469,8 +473,8 @@ function createSmoothCurvePoints(pointsPos: pointsPosType, tension?: number, clo
  */
 function drawSmoothCurve(context: CanvasRenderingContext2D, pointsPos: pointsPosType, progresspointsPos?: pointsPosType) {
    context.lineWidth = 2
-   context.lineJoin = 'round';// 优化锯齿
-   context.lineCap = 'round'; // 优化锯齿
+   context.lineJoin = "round" // 优化锯齿
+   context.lineCap = "round" // 优化锯齿
    context.strokeStyle = "rgba(255,255,255,0.6)"
    drawLines(context, pointsPos)
    if (progresspointsPos?.length) {

+ 1 - 0
src/page-instrument/view-evaluat-report/component/share-top/index.module.less

@@ -340,6 +340,7 @@
         position: relative;
         border-radius: 16px;
         box-shadow: 4px -3px 6px 0px #B2E8FF;
+        overflow: hidden;
 
         .audioBga {
             width: 100%;

+ 6 - 6
src/page-instrument/view-evaluat-report/component/share-top/index.tsx

@@ -98,15 +98,15 @@ export default defineComponent({
 						const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
 						const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
 						shareData._plrl.on('play', () => {
-							lottieDom.value.play()
-							lottieDom1.value.play()
-							lottieDom2.value.play()
+							lottieDom.value?.play()
+							lottieDom1.value?.play()
+							lottieDom2.value?.play()
 							playVisualDraw()
 						});
 						shareData._plrl.on('pause', () => {
-							lottieDom.value.pause()
-							lottieDom1.value.pause()
-							lottieDom2.value.pause()
+							lottieDom.value?.pause()
+							lottieDom1.value?.pause()
+							lottieDom2.value?.pause()
 							pauseVisualDraw()
 						});
 					}, 300); // 弹窗动画是0.25秒 这里用定时器 确保canvas 能获取到宽高

+ 7 - 3
src/view/audio-list/index.tsx

@@ -135,9 +135,13 @@ export const toggleMutePlayAudio = (source: IPlayState, muted: boolean) => {
 /** 切换节拍器音源 */
 export const changeSongSourceByBate = (isDisBate:boolean) => {
 	// isDisBate 为true 切换到不带节拍的,为false 切换到带节拍的
-	const songEleCurrentTime = audioData.songEle?.currentTime || 0
-	const backgroundEleCurrentTime = audioData.backgroundEle?.currentTime || 0
-	const mingSongEleCurrentTime = audioData.mingSongEle?.currentTime || 0
+	let songEleCurrentTime = audioData.songEle?.currentTime || 0
+	let backgroundEleCurrentTime = audioData.backgroundEle?.currentTime || 0
+	let mingSongEleCurrentTime = audioData.mingSongEle?.currentTime || 0
+	// 有一种场景,默认模式没有文件内容的时候,songEle,backgroundEle,mingSongEle都为空,在设置音源之前点击跳转位置,这时候以audioData.progress的时间为准
+	if(!audioData.songEle&&!audioData.backgroundEle&&!audioData.mingSongEle){
+		songEleCurrentTime = backgroundEleCurrentTime = mingSongEleCurrentTime = audioData.progress || 0
+	}
 	if (isDisBate) {
 		if(state.playType === "play"){
 			audioData.songEle = audioData.songCollection.songEle