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

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

@@ -294,6 +294,10 @@
             }
         }
     }
+    .videoBox{
+        width: 100%;
+        height: 100%;
+    }
     .audioBox{
         width: 100%;
         height: 100%;

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

@@ -126,21 +126,19 @@ export default defineComponent({
 			canvasDom.width = width
 			canvasDom.height = height
 			// audio
-			const audioCtx = new AudioContext()
-			const analyser = audioCtx.createAnalyser()
-			const source = audioCtx.createMediaElementSource(audioDom)
-			analyser.fftSize = fftSize
-			source.connect(analyser)
-			analyser.connect(audioCtx.destination)
-			const dataArray = new Uint8Array(analyser.frequencyBinCount)
+			let audioCtx : AudioContext | null = null
+			let analyser : AnalyserNode | null = null
+			let source : MediaElementAudioSourceNode | null = null
+			const dataArray = new Uint8Array(fftSize / 2)
 			const draw = (data: Uint8Array, ctx: CanvasRenderingContext2D, { lineGap, canvWidth, canvHeight, canvFillColor, lineColor }: propsType) => {
 				if (!ctx) return
 				const w = canvWidth
 				const h = canvHeight
 				fillCanvasBackground(ctx, w, h, canvFillColor)
-			   // 可视化
+				// 可视化
 				const dataLen = data.length
-				const step = (w / 2 - lineGap * dataLen) / dataLen
+				let step = (w / 2 - lineGap * dataLen) / dataLen
+				step < 1 && (step = 1)
 				const midX = w / 2
 				const midY = h / 2
 				let xLeft = midX
@@ -178,7 +176,7 @@ export default defineComponent({
 			}
 			const requestAnimationFrameFun = () => {
 				requestAnimationFrame(() => {
-					analyser.getByteFrequencyData(dataArray)
+					analyser?.getByteFrequencyData(dataArray)
 					draw(dataArray, canvasCtx, {
 						lineGap: 2,
 						canvWidth: width,
@@ -193,13 +191,23 @@ export default defineComponent({
 			}
 			let isPause = true
 			const playVisualDraw = () => {
-				isPause = false
+				if (!audioCtx) {
+					audioCtx = new AudioContext()
+					source = audioCtx.createMediaElementSource(audioDom)
+				}
+				analyser = audioCtx.createAnalyser()
+				analyser.fftSize = fftSize
+				source?.connect(analyser)
+				analyser.connect(audioCtx.destination)
 				audioCtx.resume()
+				isPause = false
 				requestAnimationFrameFun()
 			}
 			const pauseVisualDraw = () => {
 				isPause = true
-				audioCtx.suspend()
+				audioCtx?.suspend()
+				source?.disconnect()
+				analyser?.disconnect()
 			}
 			return {
 				playVisualDraw,