Tracking Audio Playback Progress by Adding Elapsed Time

In this lesson, we are creating a new state called mediaTime with an initial value of 0, updating sample text in the markup to display the value of mediaTime, and adding an event listener to the audio element for the timeUpdate event.

In the timeUpdate event listener callback function, the mediaTime state is set to the audio element's current time, which can be accessed using the audioRef.current.currentTime. A function is added to the onTimeUpdate event of the audio element, to be able to track the current time. And a time formatter is added to format the time for displaying elapsed time and total time.

Think about: How often does onTimeUpdate update? (every second, not every millisecond)