Not working with audio file in react

[shivam1317]

Hey @jerosoler , I have tried the same code as per the documentation but its not working Here is my component:

import React, { useEffect, useRef, useState } from "react";
import { getAudioData, linearPath, polarPath } from "waveform-path";

const VoiceAnalyzer = () => {
  const [pathLogo, setPathLogo] = useState(null);
  const audioRef = useRef(null);

  const audioFile = "Audio.mp3"; // Replace with your audio file path
  useEffect(() => {
    AudioPath("Audio.mp3");
    // AudioPath("https://jerosoler.github.io/waveform-path/hello_world.ogg");
  }, []);
  async function AudioPath(file) {
    const audioData = await getAudioData(file);

    const pathLogo = polarPath(audioData, {
      samples: 90,
      type: "steps",
      left: 200,
      top: 200,
      distance: 100,
      length: 100,
      normalize: true,
      // animation: true,
      paths: [
        { d: "L", sdeg: 0, sr: 0, edeg: 0, er: 90 },
        {
          d: "A",
          sdeg: 0,
          sr: 90,
          edeg: 100,
          er: 90,
          rx: 5,
          ry: 5,
          angle: 100,
          arc: 1,
          sweep: 1,
        },
        { d: "L", sdeg: 100, sr: 90, edeg: 100, er: 0 },
      ],
    });
    setPathLogo(pathLogo);
  }
  return (
    <div className="w-auto">
      {/* <audio ref={audioRef} src={audioFile} /> */}
      <svg id="logo" className="w-full h-screen">
        <path d={pathLogo}></path>
      </svg>
      {/* <button onClick={handlePlayPause}>{isPlaying ? "Pause" : "Play"}</button> */}
    </div>
  );
};

export default VoiceAnalyzer;

I also got an error saying:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

because its not allowed to play an audio automatically on chrome or other browsers i guess so i even added a button to play that file but still its not changing dynamically.

At last, i have tried to add animation:true and <animation> element in <path> is working as expected but its not based on the frequency of audioData, its just a random infinite animation.

Example:

<svg id="logo" className="w-full h-screen">
   <path>
          <animate
            attributeName="d"
            dur="5s"
            repeatCount="indefinite"
            calcMode="linear"
            values={pathLogo}
     />
  </path>
</svg>

Is there anything i am missing while changing the svg path dynamically based on the frequency of given audio file data? Please let me know Thanks

[jerosoler]

Hey @shivam1317

animate dur is the time of file.

You can see an example of a web component created with this library. Example: https://jerosoler.github.io/wave-audio-path-player/ Repo: https://github.com/jerosoler/wave-audio-path-player

View svg element in mdn its possible pause animations and set current time: https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement

[shivam1317]

Hey @jerosoler, Thank you for response, can you give me any react code example for circular audio vizualizer because the one i mentioned is not working with the given audio file Thanks

[jerosoler]

Maybe because the width and height are missing.

This is the example of the demo:

<svg class="round" id="example18" height="400px" width="400px">
            <path style=" stroke:url(#rgrad); stroke-width: 2px; fill: none; ">
                <animate attributeName="d" dur="2.54s" repeatCount="indefinite" calcMode="linear" values="YOUR VALUES"></animate>
        </path>
</svg>

And the Javascript

    const example18 = polarPath(audioData,{ 
        samples: 90, type: 'steps',
        left: 200, top: 200, distance: 100, length: 100,
        animation: true,
        paths: [
            {d:'L', sdeg:0, sr:0,  edeg:0, er:90 },
            {d:'A', sdeg:0, sr:90, edeg: 100, er:90, rx: 5, ry: 5, angle: 100, arc: 1, sweep: 1 },
            {d:'L', sdeg:100, sr:90,  edeg:100, er:0 },
        ]
     });
    document.querySelector("#example18 path animate").setAttribute('values', example18);