Как нарисовать круговые звуковые волны при записи звука с помощью ReactJS?

Question

Я новичок в работе с WebAudio и getUserMedia, поэтому я пытаюсь создать этот компонент диктофона с помощью ReactJS и хочу воспроизвести что-то вроде того, что сделал Facebook в своем приложении Web Messenger.

Я могу записывать звук, но я не знаю, как отображать эти круговые звуковые волны во время записи (серая круглая область вокруг красной кнопки. Я видел несколько примеров с полосами частот, но мне очень нравится этот дизайн, и мне было интересно, может ли кто-нибудь сказать мне, как это сделать?

Ссылка на код https://codesandbox.io/s/audio-recorder-m7pdu?file= / src / index.tsx

useRecorder() хук

import { useEffect, useState } from "react";

const useRecorder = () => {
  const [audioURL, setAudioURL] = useState("");
  const [isRecording, setIsRecording] = useState(false);
  const [recorder, setRecorder] = useState(null);

  useEffect(() => {
    // Lazily obtain recorder first time we're recording.
    if (recorder === null) {
      if (isRecording) {
        requestRecorder().then(setRecorder, console.error);
      }
      return;
    }

    // Manage recorder state.
    if (isRecording) {
      recorder.start();
    } else {
      recorder.stop();
    }

    // Obtain the audio when ready.
    const handleData = e => {
      setAudioURL(URL.createObjectURL(e.data));
    };

    recorder.addEventListener("dataavailable", handleData);
    return () => recorder.removeEventListener("dataavailable", handleData);
  }, [recorder, isRecording]);

  const startRecording = () => {
    setIsRecording(true);
  };

  const stopRecording = () => {
    setIsRecording(false);
  };

  return [audioURL, isRecording, startRecording, stopRecording];
};

async function requestRecorder() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  return new MediaRecorder(stream);
}
export default useRecorder;

И реализация App.tsx

function App() {
  let [audioURL, isRecording, startRecording, stopRecording] = useRecorder();
  return (
    <div className="App">
      <audio src={audioURL} controls />
      <br />
      <div
        className="btn-record"
        onClick={!isRecording ? startRecording : stopRecording}
      >
        {!isRecording ? "Record" : "Stop"}
      </div>
    </div>
  );
}