🌊
wavesurfer.jsをReactで使用する
wavesurfer.jsは音声ファイルから波形をHTMLに表示するライブラリです。
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>
</>
);
}
このように表示されます。
Discussion