wavesurfer.jsをReactで使用する

wavesurfer.jsは音声ファイルから波形をHTMLに表示するライブラリです。
https://wavesurfer-js.org/

Reactで使用する場合、DOMにアクセスする都合上wavesurferのtutorial通りに書くことができません。そこでrefを使用します。
下の例ではwaveformRefという名前でrefを作っています。load()やplayPause()などの関数を実行する場合はwaveformRef.currentから参照することができます。

import { render } from "react-dom";
import WaveSurfer from 'wavesurfer.js';
import { useRef, useEffect } from "react";

export default function App() {
  const waveformRef = useRef(null);

  useEffect(() => {
    // wavesurfer.jsがオーディオファイルをコントロールするためのオブジェクトを作成
    // waveformRef.currentに入れる
    waveformRef.current = WaveSurfer.create({
      container: waveformRef.current,
    });
    waveformRef.current.load('assets/test.wav');
  }, []);

　　　　// 再生、停止用の関数
  function handlePlayPause() {
    waveformRef.current.playPause();
  }

  return (
    <>
      <div ref={waveformRef}></div>
      <div id="control">
        <button onClick={handlePlayPause}>Play/Pause</button>
      </div>
    </>
  );
}

このように表示されます。