46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
|
// components/WavesurferPlayer.tsx
|
||
|
|
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
||
|
|
import WaveSurfer from "wavesurfer.js";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
url: string;
|
||
|
|
height?: number;
|
||
|
|
waveColor?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export type WavesurferPlayerHandle = {
|
||
|
|
play: () => void;
|
||
|
|
pause: () => void;
|
||
|
|
isPlaying: () => boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
const WavesurferPlayer = forwardRef<WavesurferPlayerHandle, Props>(({ url, height = 100, waveColor = "red" }, ref) => {
|
||
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
|
const waveSurferRef = useRef<WaveSurfer | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (containerRef.current) {
|
||
|
|
waveSurferRef.current = WaveSurfer.create({
|
||
|
|
container: containerRef.current,
|
||
|
|
waveColor,
|
||
|
|
height,
|
||
|
|
});
|
||
|
|
waveSurferRef.current.load(url);
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
waveSurferRef.current?.destroy();
|
||
|
|
};
|
||
|
|
}, [url, waveColor, height]);
|
||
|
|
|
||
|
|
useImperativeHandle(ref, () => ({
|
||
|
|
play: () => { waveSurferRef.current?.play(); },
|
||
|
|
pause: () => { waveSurferRef.current?.pause(); },
|
||
|
|
isPlaying: () => !!waveSurferRef.current?.isPlaying(),
|
||
|
|
}));
|
||
|
|
|
||
|
|
return <div ref={containerRef} className="w-full rounded-md overflow-hidden" />;
|
||
|
|
});
|
||
|
|
|
||
|
|
export default WavesurferPlayer;
|