unable to show remaining time in wavesurfer.js

Question

import React,{ useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from 'react-redux'
import { format, formWaveSurferOptions } from '../../utils/generic'
import { receiveCurrentTrack, receiveTrackRef , togglePlay} from '../../redux/action/currentTrack'
import './_playlist.scss'
import WaveSurfer from "wavesurfer.js";
import {Link} from 'react-router-dom';

const PlayList = (props) => {
  const dispatch = useDispatch()

  const { track, queue, currentTrack, index } = props
  const waveformRef = useRef(null);
  const waveRef = useSelector((state)=>state.currentTrack.waveRef)
  const wavesurfer = useRef(null);
  const currentTime = useRef(null)
  const [duration, setDuration] = useState() 

  useEffect(() => {
    
    const options = formWaveSurferOptions(waveformRef.current);
    wavesurfer.current = WaveSurfer.create(options);
    wavesurfer.current.load(track.url);
    
    wavesurfer.current.on("ready", ()=> {
      if(wavesurfer.current){
        wavesurfer.current.setVolume(0)
        setDuration(format(wavesurfer.current.getDuration()))
      }
    });
    
    return () => wavesurfer.current.destroy();
  }, [track.url]);

  useEffect(()=>{
    if(currentTrack){
      dispatch(receiveTrackRef(wavesurfer))
    } 
    return ()=> waveRef?.current.stop()

  },[currentTrack.track?.url])

  const handleClick = () => {
  
    dispatch(receiveTrackRef(wavesurfer))

    if(currentTrack){
      dispatch(togglePlay())
    } 
    else {
      waveRef?.current.stop()
      dispatch(receiveCurrentTrack(track, queue));
    }
  };

  
  
  return (
    <div 
        className={ currentTrack ? "playlist-item selected playlist" : "playlist-item playlist"}
        onClick={handleClick}
    >
            <div># {index} :</div>
            <Link to='/track'>{track.title}</Link>
            <div>{track.artist}</div>
            <div><span>0.00</span> / {duration && duration}</div> 
            <div className="wave-form" id="waveform" onChange={()=>console.log('hhh')} ref={waveformRef} />
            <div>{duration && duration}</div>
    </div>
  );
};

export default PlayList;

React-Wavesurfer was unmaintained, so i have moved on to the wavesurfer.js but the issue arrises the now how i can detect the audio current time and show to the page e.g. 0:01 / 3.02, i have use wavesurfer.on('audioprocess') but i can not detect it, so if any one knows the solution please help, thankyou :)

Answer 1

From the Official Doc :

getCurrentTime() – Returns current progress in seconds.

There's also a audioprocess event as you mentioned that fires continuously as the audio plays.
So by combining these together, we have this:

let current;
wavesurfer.on('audioprocess', () => {      
    current = wavesurfer.getCurrentTime();
});

Note that your wavesurfer player is assigned to the name wavesurfer.current. so the code should be wavesurfer.current.on('audioprocess', () => {});