曲目频率线

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

@@ -332,8 +332,9 @@
         }
     }
     &.padPlayerBox{
-        width: 418px;
-        height: 248px;
+        width: 428px;
+        height: 252px;
+        padding: 12px;
         .audioBox{
             .audioBga1{
                 width: 112px;

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

@@ -119,7 +119,9 @@ export default defineComponent({
 			type propsType = { canvWidth: number; canvHeight: number; canvFillColor: string; lineColor: string; lineGap: number }
 			// canvas
 			const canvasCtx = canvasDom.getContext("2d")!
-			const { width, height } = canvasDom.getBoundingClientRect()
+      let { width, height } = canvasDom.getBoundingClientRect()
+      width = Math.ceil(width)
+      height = Math.ceil(height)
 			canvasDom.width = width
 			canvasDom.height = height
 			// audio
@@ -191,8 +193,8 @@ export default defineComponent({
             return
           }
           //analyser?.getByteFrequencyData(dataArray)
-          draw(generateMixedData(38), canvasCtx, {
-            lineGap: 3,
+          draw(generateMixedData(48), canvasCtx, {
+            lineGap: 2,
             canvWidth: width,
             canvHeight: height,
             canvFillColor: "transparent",
@@ -228,19 +230,25 @@ export default defineComponent({
 				pauseVisualDraw
 			}
 		}
-    function generateMixedData(size:number) {
+    function generateMixedData(size: number) {
       const dataArray = new Uint8Array(size);
       const baseNoiseAmplitude = 30;
       const minFrequency = 0.01;
       const maxFrequency = 0.2;
       const minAmplitude = 50;
       const maxAmplitude = 150;
+      let lastAmplitude = maxAmplitude;  // 初始振幅设置为最大值
+      let lastFrequency = minFrequency + Math.random() * (maxFrequency - minFrequency);
+    
       for (let i = 0; i < size; i++) {
-          const frequency = minFrequency + Math.random() * (maxFrequency - minFrequency);
-          const amplitude = minAmplitude + Math.random() * (maxAmplitude - minAmplitude);
+          const decayFactor = 1 - (i / size);  // 使振幅随时间递减
+          const amplitude = lastAmplitude * decayFactor + (Math.random() - 0.5) * 10;
+          const frequency = lastFrequency + (Math.random() - 0.5) * 0.01;
           const wave = amplitude * (0.5 + 0.5 * Math.sin(frequency * i));
           const noise = Math.floor(Math.random() * baseNoiseAmplitude) - baseNoiseAmplitude / 2;
           dataArray[i] = Math.min(255, Math.max(0, Math.floor(wave + noise)));
+          lastAmplitude += (amplitude - lastAmplitude) * 0.05;
+          lastFrequency += (frequency - lastFrequency) * 0.05;
       }
       return dataArray;
     }