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.

[jerosoler]

Hi!

View simple example animation:

HTML:

 <svg id="example10" height="140px" width="800px">
            <path style="fill:none; stroke-width: 3; stroke:red" >
                <animate
                attributeName="d"
                dur="2.54s"
                repeatCount="indefinite"
                calcMode="linear"
                values=""
            />
            </path>
</svg>

Javascript:

import { getAudioData, linearPath, polarPath } from 'https://cdn.skypack.dev/waveform-path';

async function AudioPath(file) {
  console.log("test");
    const audioData = await getAudioData(file);

    const example10 = linearPath(audioData,{ 
        samples: 100, type: 'steps', top: 20, animation: true
    });
    document.querySelector("#example10 path animate").setAttribute('values', example10);
    console.log("test2");
}
AudioPath("https://jerosoler.github.io/waveform-path/hello_world.ogg");

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

If it is a long audio file, it may cause an error, since all the calculations are done by the browser, a problem with the AudioContext API.

View example online:
https://codi.link/IDxzdmcgaWQ9ImV4YW1wbGUxMCIgaGVpZ2h0PSIxNDBweCIgd2lkdGg9IjgwMHB4Ij4KICAgICAgICAgICAgPHBhdGggc3R5bGU9ImZpbGw6bm9uZTsgc3Ryb2tlLXdpZHRoOiAzOyBzdHJva2U6cmVkIiA+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZQogICAgICAgICAgICAgICAgYXR0cmlidXRlTmFtZT0iZCIKICAgICAgICAgICAgICAgIGR1cj0iMi41NHMiCiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICB2YWx1ZXM9IiIKICAgICAgICAgICAgLz4KICAgICAgICAgICAgPC9wYXRoPgo8L3N2Zz4=%7C%7CaW1wb3J0IHsgZ2V0QXVkaW9EYXRhLCBsaW5lYXJQYXRoLCBwb2xhclBhdGggfSBmcm9tICdodHRwczovL2Nkbi5za3lwYWNrLmRldi93YXZlZm9ybS1wYXRoJzsKCmFzeW5jIGZ1bmN0aW9uIEF1ZGlvUGF0aChmaWxlKSB7CiAgY29uc29sZS5sb2coInRlc3QiKTsKICAgIGNvbnN0IGF1ZGlvRGF0YSA9IGF3YWl0IGdldEF1ZGlvRGF0YShmaWxlKTsKCiAgICBjb25zdCBleGFtcGxlMTAgPSBsaW5lYXJQYXRoKGF1ZGlvRGF0YSx7IAogICAgICAgIHNhbXBsZXM6IDEwMCwgdHlwZTogJ3N0ZXBzJywgdG9wOiAyMCwgYW5pbWF0aW9uOiB0cnVlCiAgICB9KTsKICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoIiNleGFtcGxlMTAgcGF0aCBhbmltYXRlIikuc2V0QXR0cmlidXRlKCd2YWx1ZXMnLCBleGFtcGxlMTApOwogICAgY29uc29sZS5sb2coInRlc3QyIik7Cn0KQXVkaW9QYXRoKCJodHRwczovL2plcm9zb2xlci5naXRodWIuaW8vd2F2ZWZvcm0tcGF0aC9oZWxsb193b3JsZC5vZ2ciKTsKIAogCgoK