title: How can i track the recording time on MediaRecorder
body: <p>I want to display the recording time, like when the user clicks <code>start record</code> button, it displays the time and it starts to record, likewise when the <code>stop record</code> button is clicked. How can i track the time from the start of the recording til the end of it</p>
  <pre class="lang-js prettyprint-override"><code>
  const MyComponent = () =&gt; {
   const recordAudio = useRef();
   const stopRecAudio = useRef();
  
  
  const getAudio = async() =&gt;{
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const mediaRecorder = new MediaRecorder(stream);
        
       let audio = [];
      mediaRecorder.ondataavailable = (e) =&gt; {
                  audio.push(e.data);
              };
  
              recordAudio.current.onclick = () =&gt; {
                  if (mediaRecorder.state !== &quot;recording&quot;) {
                      
                      mediaRecorder.start();
                      
                  }
              };
  
              stopRecAudio.current.onclick = () =&gt; {
                  if (mediaRecorder.state !== &quot;inactive&quot;) {
                      
                      mediaRecorder.stop();
                  }
              }; 
  
      }
  
     return (
       &lt;&gt;
        &lt;btn  ref={recordAudio} &gt; start audio &lt;/btn&gt;
        &lt;btn  ref={stopRecAudio} &gt; stop audio  &lt;/btn&gt;
       &lt;/&gt;
    
     );
  
  
  }
  
  </code></pre>