Does animation property work?

[dchhetri]

I basically take the user audio input file and run this function to generate the new path

  
export default function App() {
  // const [buffer, setBuffer] = useState<Buffer | undefined>();
  const [path, setPath] = useState("");

  const handleChange = async (e) => {
    const url = URL.createObjectURL(e.target.files[0]);
    const decoded = await getAudioData(url);
    const current = linearPath(decoded, {
      samples: 100,
      type: "steps",
      top: 20,
      animation: true,
    });
    setPath(current);
  };

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <svg
        id="viz"
        style={{
          width: "100%",
          height: 200,
        }}
      >
        <path d={path} />
      </svg>
      <input type="file" onChange={handleChange} />
    </div>
  );
}

the path gets set on the <path d={currentPath} /> object. Do I have to manually update the path each frame on my side? If so, am I expected the file passed to linearPath be a chunk? Just trying to understand how given an full audio file, we can animate showing the waveform for each frame

I see the animation property we can pass to linearPath but it throws a stack size exceeded exception.