Implementing a Duration State

We created a duration state with an initial value of zero, then added an event listener to the audio element for the loadedMetaData event. In the event listener callback function, you set the duration state's value to be the audio element's current duration. This ensures that the value of the duration state is only set once the audio element metadata is loaded, allowing you to display the accurate total time of the audio file.

Think about: Why do we need to set the duration on the onLoadedMetadata event?

"The onLoadedMetadata event occurs when metadata for the specified audio/video has been loaded." You can read the docs here