zhw2590582 / WFPlayer

:ocean: WFPlayer.js is an audio waveform generator
https://wfplayer.js.org
MIT License
265 stars 33 forks source link

getting audio infinity #46

Closed umairmanzoor1143 closed 1 year ago

umairmanzoor1143 commented 1 year ago

image

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;
zhw2590582 commented 1 year ago

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