Closed umairmanzoor1143 closed 1 year ago
import { useEffect, useMemo, useState } from "react"; import WFPlayer from "wfplayer"; import useTranscriptionRef from "./useTranscriptionRef"; interface Props extends Partial<WFPlayer> { url: string; } const useWFPlayer = ( containerRef: React.RefObject<HTMLDivElement>, options: Props ): WFPlayer | null => { const [wavesurfer, setWavesurfer] = useState<WFPlayer | null>(null); const { waveSurferRef } = useTranscriptionRef(); const wfPlayerProps = useMemo(() => { return options; }, [options]); useEffect(() => { if (!containerRef.current || !options?.url) return; console.log(WFPlayer); const wf = new WFPlayer({ ...wfPlayerProps.config, container: containerRef.current, }); if (!!wf) { wf.load(wfPlayerProps?.url); waveSurferRef.current = wf; setWavesurfer(wf); } wf?.on("grabbing", (currentTime: any) => { wf?.seek(currentTime); }); return () => { if (wf) wf?.destroy(); }; }, [wfPlayerProps?.url, containerRef?.current]); return wavesurfer; }; export default useWFPlayer;
https://github.com/zhw2590582/WFPlayer/blob/eb54b6d46ef45cd7895c4b3fa5159b5b212ba9cd/src/index.js#L118
At present, the duration can only be obtained through mediaElement, maybe you need to add a mediaElement