分享页

src/views/creation/audioVisualDraw.ts

@@ -13,13 +13,13 @@
       canvasDom.width = width
       canvasDom.height = height
       // audio
-      const audioCtx = new AudioContext()
-      const source = audioCtx.createMediaElementSource(audioDom)
-      const analyser = audioCtx.createAnalyser()
-      analyser.fftSize = fftSize
-      source?.connect(analyser)
-      analyser.connect(audioCtx.destination)
-      const dataArray = new Uint8Array(fftSize / 2)
+      //const audioCtx = new AudioContext()
+      //const source = audioCtx.createMediaElementSource(audioDom)
+      //const analyser = audioCtx.createAnalyser()
+      //analyser.fftSize = fftSize
+      //source?.connect(analyser)
+      //analyser.connect(audioCtx.destination)
+      //const dataArray = new Uint8Array(fftSize / 2)
       const draw = (data: Uint8Array, ctx: CanvasRenderingContext2D, { lineGap, canvWidth, canvHeight, canvFillColor, lineColor }: propsType) => {
         if (!ctx) return
         const w = canvWidth
@@ -66,8 +66,8 @@
       }
       const requestAnimationFrameFun = () => {
         requestAnimationFrame(() => {
-          analyser?.getByteFrequencyData(dataArray)
-          draw(dataArray, canvasCtx, {
+          //analyser?.getByteFrequencyData(dataArray)
+          draw(generateMixedData(48), canvasCtx, {
             lineGap: 2,
             canvWidth: width,
             canvHeight: height,
@@ -99,3 +99,16 @@
         pauseVisualDraw
       }
     }
+
+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;
+}

src/views/creation/index.tsx

@@ -58,6 +58,7 @@ import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import playProgressData from "./playCreation/playProgress"
 import Loading from './loading';
+import { generateMixedData } from "./audioVisualDraw"
 
 export default defineComponent({
   name: 'creation-detail',
@@ -271,10 +272,10 @@ export default defineComponent({
       canvasDom.width = width
       canvasDom.height = height
       // audio
-      let audioCtx : AudioContext | null = null
-      let analyser : AnalyserNode | null = null
-      let source : MediaElementAudioSourceNode | null = null
-      const dataArray = new Uint8Array(fftSize / 2)
+      // 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
@@ -321,8 +322,8 @@ export default defineComponent({
       }
       const requestAnimationFrameFun = () => {
         requestAnimationFrame(() => {
-          analyser?.getByteFrequencyData(dataArray)
-          draw(dataArray, canvasCtx, {
+          //analyser?.getByteFrequencyData(dataArray)
+          draw(generateMixedData(48), canvasCtx, {
             lineGap: 2,
             canvWidth: width,
             canvHeight: height,
@@ -336,14 +337,14 @@ export default defineComponent({
       }
       let isPause = true
       const playVisualDraw = () => {
-        if (!audioCtx) {
-          audioCtx = new AudioContext()
-          source = audioCtx.createMediaElementSource(audioDom)
-          analyser = audioCtx.createAnalyser()
-          analyser.fftSize = fftSize
-          source?.connect(analyser)
-          analyser.connect(audioCtx.destination)
-        }
+        // 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()

src/views/creation/playCreation/index.tsx

@@ -17,6 +17,7 @@ import { usePageVisibility } from '@vant/use';
 import playProgressData from "./playProgress"
 import Loading from '../loading';
 import { NoticeBar } from "vant"
+import { generateMixedData } from "../audioVisualDraw"
 
 export default defineComponent({
   name: 'playCreation',
@@ -166,13 +167,13 @@ export default defineComponent({
       canvasDom.width = width
       canvasDom.height = height
       // audio
-      const audioCtx = new AudioContext()
-      const source = audioCtx.createMediaElementSource(audioDom)
-      const analyser = audioCtx.createAnalyser()
-      analyser.fftSize = fftSize
-      source?.connect(analyser)
-      analyser.connect(audioCtx.destination)
-      const dataArray = new Uint8Array(fftSize / 2)
+      // const audioCtx = new AudioContext()
+      // const source = audioCtx.createMediaElementSource(audioDom)
+      // const analyser = audioCtx.createAnalyser()
+      // analyser.fftSize = fftSize
+      // source?.connect(analyser)
+      // analyser.connect(audioCtx.destination)
+      // const dataArray = new Uint8Array(fftSize / 2)
       const draw = (data: Uint8Array, ctx: CanvasRenderingContext2D, { lineGap, canvWidth, canvHeight, canvFillColor, lineColor }: propsType) => {
         if (!ctx) return
         const w = canvWidth
@@ -219,8 +220,8 @@ export default defineComponent({
       }
       const requestAnimationFrameFun = () => {
         requestAnimationFrame(() => {
-          analyser?.getByteFrequencyData(dataArray)
-          draw(dataArray, canvasCtx, {
+          // analyser?.getByteFrequencyData(dataArray)
+          draw(generateMixedData(48), canvasCtx, {
             lineGap: 2,
             canvWidth: width,
             canvHeight: height,