Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/classroom-app into jenkins-test

src/views/creation/audioVisualDraw.ts

@@ -65,19 +65,33 @@
         ctx.fillRect(0, 0, w, h)
       }
       const requestAnimationFrameFun = () => {
-        requestAnimationFrame(() => {
-          //analyser?.getByteFrequencyData(dataArray)
-          draw(generateMixedData(48), canvasCtx, {
-            lineGap: 2,
-            canvWidth: width,
-            canvHeight: height,
-            canvFillColor: "transparent",
-            lineColor: "rgba(255, 255, 255, 0.7)"
-          })
-          if (!isPause) {
-            requestAnimationFrameFun()
-          }
-        })
+        // requestAnimationFrame(() => {
+        //   //analyser?.getByteFrequencyData(dataArray)
+        //   draw(generateMixedData(48), canvasCtx, {
+        //     lineGap: 2,
+        //     canvWidth: width,
+        //     canvHeight: height,
+        //     canvFillColor: "transparent",
+        //     lineColor: "rgba(255, 255, 255, 0.7)"
+        //   })
+        //   if (!isPause) {
+        //     requestAnimationFrameFun()
+        //   }
+        // })
+        const _time = setInterval(() => {
+            if (isPause) {
+              clearInterval(_time)
+              return
+            }
+            //analyser?.getByteFrequencyData(dataArray)
+            draw(generateMixedData(38), canvasCtx, {
+              lineGap: 3,
+              canvWidth: width,
+              canvHeight: height,
+              canvFillColor: "transparent",
+              lineColor: "rgba(255, 255, 255, 0.7)"
+            })
+        }, 300);
       }
       let isPause = true
       const playVisualDraw = () => {
@@ -101,14 +115,19 @@
     }
 
 export function generateMixedData(size:number) {
-      const dataArray = new Uint8Array(size);
-      const noiseAmplitude = 30;
-      const frequency = 0.1;
-      const amplitude = 128;
-      for (let i = 0; i < size; i++) {
-          const noise = Math.floor(Math.random() * noiseAmplitude);
-          const wave = amplitude * (0.5 + 0.5 * Math.sin(frequency * i));
-          dataArray[i] = Math.min(255, Math.max(0, Math.floor(wave + noise)));
-      }
-      return dataArray;
+  const dataArray = new Uint8Array(size);
+  const baseNoiseAmplitude = 30;
+  const minFrequency = 0.01;
+  const maxFrequency = 0.2;
+  const minAmplitude = 50;
+  const maxAmplitude = 150;
+  for (let i = 0; i < size; i++) {
+      const frequency = minFrequency + Math.random() * (maxFrequency - minFrequency);
+      const amplitude = minAmplitude + Math.random() * (maxAmplitude - minAmplitude);
+      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)));
+  }
+  return dataArray;
 }
+

src/views/creation/index.module.less

@@ -125,7 +125,7 @@
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
-          width: 308px;
+          width: 280px;
           height: 55px;
       }
   }

src/views/creation/index.tsx

@@ -321,19 +321,33 @@ export default defineComponent({
         ctx.fillRect(0, 0, w, h)
       }
       const requestAnimationFrameFun = () => {
-        requestAnimationFrame(() => {
+        // requestAnimationFrame(() => {
+        //   //analyser?.getByteFrequencyData(dataArray)
+        //   draw(generateMixedData(48), canvasCtx, {
+        //     lineGap: 2,
+        //     canvWidth: width,
+        //     canvHeight: height,
+        //     canvFillColor: "transparent",
+        //     lineColor: "rgba(255, 255, 255, 0.7)"
+        //   })
+        //   if (!isPause) {
+        //     requestAnimationFrameFun()
+        //   }
+        // })
+        const _time = setInterval(() => {
+          if (isPause) {
+            clearInterval(_time)
+            return
+          }
           //analyser?.getByteFrequencyData(dataArray)
-          draw(generateMixedData(48), canvasCtx, {
-            lineGap: 2,
+          draw(generateMixedData(38), canvasCtx, {
+            lineGap: 3,
             canvWidth: width,
             canvHeight: height,
             canvFillColor: "transparent",
             lineColor: "rgba(255, 255, 255, 0.7)"
           })
-          if (!isPause) {
-            requestAnimationFrameFun()
-          }
-        })
+        }, 300);
       }
       let isPause = true
       const playVisualDraw = () => {

src/views/creation/playCreation/index.tsx

@@ -219,19 +219,33 @@ export default defineComponent({
         ctx.fillRect(0, 0, w, h)
       }
       const requestAnimationFrameFun = () => {
-        requestAnimationFrame(() => {
-          // analyser?.getByteFrequencyData(dataArray)
-          draw(generateMixedData(48), canvasCtx, {
-            lineGap: 2,
+        // requestAnimationFrame(() => {
+        //   // analyser?.getByteFrequencyData(dataArray)
+        //   draw(generateMixedData(48), canvasCtx, {
+        //     lineGap: 2,
+        //     canvWidth: width,
+        //     canvHeight: height,
+        //     canvFillColor: "transparent",
+        //     lineColor: "rgba(255, 255, 255, 0.7)"
+        //   })
+        //   if (!isPause) {
+        //     requestAnimationFrameFun()
+        //   }
+        // })
+        const _time = setInterval(() => {
+          if (isPause) {
+            clearInterval(_time)
+            return
+          }
+          //analyser?.getByteFrequencyData(dataArray)
+          draw(generateMixedData(38), canvasCtx, {
+            lineGap: 3,
             canvWidth: width,
             canvHeight: height,
             canvFillColor: "transparent",
             lineColor: "rgba(255, 255, 255, 0.7)"
           })
-          if (!isPause) {
-            requestAnimationFrameFun()
-          }
-        })
+        }, 300);
       }
       let isPause = true
       const playVisualDraw = () => {