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)