title: unable to show remaining time in wavesurfer.js
body: <pre><code>import React,{ useEffect, useRef, useState } from &quot;react&quot;;
  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 &quot;wavesurfer.js&quot;;
  import {Link} from 'react-router-dom';
  
  const PlayList = (props) =&gt; {
    const dispatch = useDispatch()
  
    const { track, queue, currentTrack, index } = props
    const waveformRef = useRef(null);
    const waveRef = useSelector((state)=&gt;state.currentTrack.waveRef)
    const wavesurfer = useRef(null);
    const currentTime = useRef(null)
    const [duration, setDuration] = useState() 
  
    useEffect(() =&gt; {
      
      const options = formWaveSurferOptions(waveformRef.current);
      wavesurfer.current = WaveSurfer.create(options);
      wavesurfer.current.load(track.url);
      
      wavesurfer.current.on(&quot;ready&quot;, ()=&gt; {
        if(wavesurfer.current){
          wavesurfer.current.setVolume(0)
          setDuration(format(wavesurfer.current.getDuration()))
        }
      });
      
      return () =&gt; wavesurfer.current.destroy();
    }, [track.url]);
  
    useEffect(()=&gt;{
      if(currentTrack){
        dispatch(receiveTrackRef(wavesurfer))
      } 
      return ()=&gt; waveRef?.current.stop()
  
    },[currentTrack.track?.url])
  
    const handleClick = () =&gt; {
    
      dispatch(receiveTrackRef(wavesurfer))
  
      if(currentTrack){
        dispatch(togglePlay())
      } 
      else {
        waveRef?.current.stop()
        dispatch(receiveCurrentTrack(track, queue));
      }
    };
  
    
    
    return (
      &lt;div 
          className={ currentTrack ? &quot;playlist-item selected playlist&quot; : &quot;playlist-item playlist&quot;}
          onClick={handleClick}
      &gt;
              &lt;div&gt;# {index} :&lt;/div&gt;
              &lt;Link to='/track'&gt;{track.title}&lt;/Link&gt;
              &lt;div&gt;{track.artist}&lt;/div&gt;
              &lt;div&gt;&lt;span&gt;0.00&lt;/span&gt; / {duration &amp;&amp; duration}&lt;/div&gt; 
              &lt;div className=&quot;wave-form&quot; id=&quot;waveform&quot; onChange={()=&gt;console.log('hhh')} ref={waveformRef} /&gt;
              &lt;div&gt;{duration &amp;&amp; duration}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default PlayList;
  </code></pre>
  <blockquote>
  <p>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 :)</p>
  </blockquote>